<template>
    <div class="reimbursement-content-box-v" :key="reimbursementContentKey">
        <div style="display:flex;width: 80%;margin: 8px auto 8px auto;">
            <a-steps labelPlacement="vertical" :current="currentSteps" size="small" @change="currentStepChange">
                <a-step title="报销人员信息" />
                <a-step title="特殊事项申请" />
                <a-step title="劳务费" />
                <a-step title="交通费" />
                <a-step title="住宿费" />
                <a-step title="汇总表单" />
            </a-steps>
            <a-button class="green-btn" @click="getguideCzBxdZt" icon='read' v-if="!isFbxdzt && currentSteps !== 4">新手指引</a-button>
        </div>
        <div class="reimbursement-infoArea-box">
            <div v-if="currentSteps == 0" :style="{height:fromState.heightType =='model'?'calc(100vh - 195px)':(fromState.heightType =='isReviewVer'?'calc(100vh - 268px)':'calc(100vh - 225px)'),overflow: 'auto',}">
                <table
                    id="step1-1"
                    class="reimbursement-transportation-table"
                    border="1"
                    cellspacing="0"
                    style="width: calc(100%);border-color: #d9d9d9 !important;">
                    <tr>
                        <tr style="background: #dee5ed !important;">
                            <th colspan="4">审评内容</th>
                        </tr>
                        <td class="special-table-lable-td">报销内容描述</td>
                        <td colspan="3">
                            <div style="display: flex;align-items: center;">
                                <a-textarea
                                    v-if="!isFbxdzt"
                                    style="width: 100%;"
                                    v-model="fromState.fbxnrms"
                                    :autosize="{ minRows: 2, maxRows: 10000 }"
                                    placeholder="请输入报销内容描述"
                                ></a-textarea>
                                <a-button v-if="!isFbxdzt" class="blue-btn" style="margin-left: 10px;" type="primary" @click="saveClick(true)">确认修改</a-button>
                            </div>
                        </td>
                    </tr>
                </table>
                <commpVxeTable
                    id="step1-2"
                    :key="dataTableKey"
                    :config="dataTableConfig"
                    :columns="columnsVxe"
                    :formItem="[]"
                    ref="acceptanceRegistrationRef"
                    @checkboxChange="selectedRowKeysChange"
                    @searchEvent="searchEvent"
                    @resetEvent="resetEvent"
                >
                    <template v-slot:externalOperations="{data}">
                        <vxe-form-item>
                            <template>
                                <a-button id="step1-4" v-if="!isView" class="blue-btn" type="primary" @click="addPersonnelClick()" icon="user-add">新增人员</a-button>
                            </template>
                        </vxe-form-item>
                        <vxe-form-item>
                            <template>
                                <a-button id="step1-3" v-if="!isView" class="blue-btn" type="primary" @click="selectPersonnelClick()" icon="select">选择人员</a-button>
                            </template>
                        </vxe-form-item>
                    </template>
                    <template v-slot:realname_name="{row}">
                        <!-- <a @click="viewClick(row,true)"> -->
                            <span style="padding-right: 21;" v-if="row.realname && row.realname.length == 2">
                                <span v-for="(trem,tI) in row.realname.split('')" :key="tI" >
                                {{trem}}
                                <span v-if="tI+1 !== row.realname.split('').length">&nbsp;&nbsp;</span>
                                </span>
                            </span>
                            <span style="padding-right: 21;" v-else>{{ row.realname }}</span>
                        <!-- </a> -->
                    </template>
                    <template v-slot:sex_default="{row}">
                        <span>{{ row.sex == 1?'男':'女' }}</span>
                    </template>
                    <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                        <a-form id="step1-5" layout="inline" class="search-form" >
                            <a-form-item >
                                <a-button v-if="!isView" class="green-btn" type="primary" @click="upDataClick(row)" icon="reload">同步资料</a-button>
                            </a-form-item>
                            <a-form-item >
                                <a-button v-if="!isView" class="blue-btn" type="primary" @click="editClick(row)" icon="edit">修改</a-button>
                            </a-form-item>
                            <a-form-item >
                                <a-button v-if="!isView" class="red-btn" type="primary" @click="deleteClick(row)" icon="delete">删除</a-button>
                            </a-form-item>
                        </a-form>
                    </template>
                </commpVxeTable>
            </div>
            <div v-if="currentSteps == 1">
                <commpVxeTable
                    v-if="fromState.fsfytssxsq == '是'"
                    :key="specialDataTableKey"
                    :config="specialDataTableConfig"
                    :columns="specialColumnsVxe"
                    :formItem="[]"
                    :isCanWrap="true"
                    ref="specialRegistrationRef"
                    @checkboxChange="specialSelectedRowKeysChange"
                    @searchEvent="specialSearchEvent"
                    @resetEvent="specialResetEvent"
                >
                    <template v-slot:externalOperations="{data}">
                        <vxe-form-item>
                            <template>
                                <a-button class="green-btn" type="primary" @click="uploadFilesListOther(true)" icon="upload">其他附件上传</a-button>
                            </template>
                        </vxe-form-item>
                        <vxe-form-item>
                            <template>
                                <!-- @click="specialAddClick()" -->
                                <a-button class="blue-btn" type="primary" @click="addSpecialReimburse('超期产生')" icon="user-add">超期产生额外费用报销</a-button>
                            </template>
                        </vxe-form-item>
                        <vxe-form-item>
                            <template>
                                <a-button class="blue-btn" type="primary" @click="addSpecialReimburse('午休房')" icon="user-add">午休房报销</a-button>
                            </template>
                        </vxe-form-item>
                        <vxe-form-item>
                            <template>
                                <a-button class="blue-btn" type="primary" @click="addSpecialReimburse('无单位派车')" icon="user-add">无单位派车</a-button>
                            </template>
                        </vxe-form-item>
                        <!-- 暂未做 -->
                        <!-- <vxe-form-item>
                            <template>
                                <a-button class="blue-btn" type="primary" @click="specialPrintClick()" icon="printer">打印</a-button>
                            </template>
                        </vxe-form-item> -->
                    </template>
                    <template v-slot:fewfybxsqrxm_fwxfsqrxm="{row}">
                        <div v-if="row.fsqlx == '超期产生'">
                            <span>超期产生额外费用报销：</span>
                            <span>{{ row.fewfybxsqrxm }}</span>
                        </div>
                        <div v-if="row.fsqlx == '午休房'">
                            <span>午休房报销：</span>
                            <span>{{ row.fwxfsqrxm }}</span>
                        </div>
                        <div v-if="row.fsqlx == '无单位派车'">
                            <span>无单位派车：</span>
                            <span>{{ row.fewfybxsqrxm }}</span>
                        </div>
                    </template>
                    <template v-slot:operation_fsffqlc="{row}">
                        {{ row.fsffqlc }}
                        <span style="display: block;" v-if="row.fsffqlc == '是'">（{{ row.flczt }}）</span>
                    </template>
                    <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                        <a-form layout="inline" class="search-form" >
                            <!-- <a-form-item >
                                <a-button v-if="!isView" class="blue-btn" type="primary" @click="specialEditClick(row)" icon="edit">修改</a-button>
                            </a-form-item> -->
                            <a-form-item v-if="row.fsffqlc == '否' && !isView">
                                <a-button class="orange-btn" type="primary" @click="specialEditClick(row)" icon="edit">编辑</a-button>
                            </a-form-item>
                            <a-form-item v-else>
                                <a-button class="green-btn" type="primary" @click="specialViewClick(row)" icon="eye">查看</a-button>
                            </a-form-item>
                            <a-form-item v-if="row.chzt && !isView">
                                <a-button class="blue-btn" type="primary" @click="specialWithdrawClick(row)" icon="rollback">撤回</a-button>
                            </a-form-item>
                            <a-form-item v-if="row.fsffqlc == '否' && !isView">
                                <!-- <a-button class="red-btn" type="primary" @click="isSpecialDeleteClick(row)" icon="delete">查看是否可删除</a-button> -->
                                <a-button class="red-btn" type="primary" @click="specialDeleteClick(row)" icon="delete">删除</a-button>
                            </a-form-item>
                        </a-form>
                    </template>
                </commpVxeTable>
                <div v-else class="special-content-radio" :style="{height:fromState.heightType =='isReviewVer'?'calc(100vh - 270px)':'calc(100vh - 225px)'}" >
                    <a-radio-group :disabled="isView" name="radioGroup" v-model="isSpecial" @change="specialChange">
                        <a-radio value="否">无特殊事项，跳过该步骤</a-radio>
                        <a-radio value="是">增加特殊事项申请</a-radio>
                    </a-radio-group>
                    <div v-if="isSpecial == '是'" class="special-item-btn-v">
                        <a-button id="step2-1" style="width: 298px;" type="primary" class="blue-btn" @click="addSpecialReimburse('超期产生')">超期产生额外费用报销填报</a-button>
                        <div style="height: 15px;"/>
                        <a-button id="step2-2" style="width: 298px;" type="primary" class="blue-btn" @click="addSpecialReimburse('午休房')">午休房报销填报</a-button>
                        <div style="height: 15px;"/>
                        <a-button id="step2-3" style="width: 298px;" type="primary" class="blue-btn" @click="addSpecialReimburse('无单位派车')">无单位派车</a-button>
                        <!-- <div style="height: 15px;"/>
                        <a-button style="width: 298px;" type="primary" class="blue-btn" @click="addSpecialReimburse('超期产生和午休房')">超期产生额外费用报销填报和午休房报销填报</a-button> -->
                    </div>
                </div>
            </div>
            <div v-if="currentSteps == 2" :style="{height:fromState.heightType =='model'?'calc(100vh - 195px)':(fromState.heightType =='isReviewVer'?'calc(100vh - 268px)':'calc(100vh - 225px)'),overflow: 'auto',}">
                <div class="fjcts-content-box">
                    <div class="fjcts-content-v" :style="{width:reimbursementServiceFeeHeight+'px'}">
                        <div>
                            <span class="fjcts-content-text">审评天数：</span>
                            <span class="fjcts-content-right">{{ fromState.fjcts }}</span>
                            <!-- <a-input-number
                                style="width: 142px;"
                                placeholder="请输入审评天数"
                                v-model="formState3.fpxxs"
                                :min="1" :precision="0" /> -->
                        </div>
                        <div id="step3-1" style="display: flex;justify-content: center;">
                            <span class="fjcts-content-text">劳务费，伙食补助，交通补助实际天数为：</span>
                            <a-radio-group @change="fjctsChange">
                                <a-radio :value="Number(fromState.fjcts)+1">审评天数+1</a-radio>
                                <a-radio :value="Number(fromState.fjcts)+2">审评天数+2</a-radio>
                            </a-radio-group>
                        </div>
                        <div id="step3-2">
                            <span style="color:red;">
                                提示：标准为自动生成，如果有误请自行修改。
                            </span>
                        </div>
                    </div>
                </div>
                <div style="display: flex;justify-content: center;">
                    <table
                        class="reimbursement-serviceFee-table step3-3" :id="reimbursementServiceFeeId" border="1" borderColor="#d9d9d9" cellspacing="0" style="border-color: #d9d9d9 !important;">
                        <tr style="background: #dee5ed !important;">
                            <th rowspan="2" style="width: 100px;">报销人员</th>
                            <th colspan="4">劳务费</th>
                            <th colspan="3">伙食补助</th>
                            <th colspan="3">交通补助</th>
                        </tr>
                        <tr style="background: #dee5ed !important;">
                            <th><span style="color:red;">* </span>有无劳务费</th>
                            <th><span style="color:red;">* </span>天&ensp;&ensp;数</th>
                            <th>标&ensp;&ensp;准</th>
                            <th style="width: 150px;"><span style="color:red;">* </span>费&ensp;&ensp;用</th>
                            <th><span style="color:red;">* </span>天&ensp;&ensp;数</th>
                            <th>标&ensp;&ensp;准</th>
                            <th style="width: 150px;"><span style="color:red;">* </span>费&ensp;&ensp;用</th>
                            <th>天&ensp;&ensp;数<span style="color:red;">* </span></th>
                            <th>标&ensp;&ensp;准</th>
                            <th style="width: 150px;"><span style="color:red;">* </span>费&ensp;&ensp;用</th>
                        </tr>
                        <tr v-for="(item,index) in personnelList" :key="item.id" :style="{background:index % 2 !== 0?'#f0f0f1 !important':''}">
                            <td>
                                <span style="display: flex;justify-content: center;" v-if="item.realname && item.realname.length == 2">
                                    <span style="width: 48px;display: flex;justify-content: space-between;">
                                        <span v-for="(trem,tI) in item.realname.split('')" :key="tI" >
                                            {{trem}}
                                            <span v-if="tI+1 !== item.realname.split('').length">&nbsp;&nbsp;</span>
                                        </span>
                                    </span>
                                </span>
                                <span v-else>{{ item.realname }}</span>
                            </td>
                            <td style="width:120px;">
                                <div>
                                    <a-radio-group
                                        v-if="!isView"
                                        name="radioGroup"
                                        v-model="item.fywlwf"
                                        @change="serviceFeeBlur({fywlwf:item.fywlwf,...item})">
                                        <a-radio value="有">有</a-radio>
                                        <a-radio value="无">无</a-radio>
                                    </a-radio-group>
                                    <span v-else>{{ item.fywlwf }}</span>
                                </div>
                            </td>
                            <td class="serviceFee-icon-text-td">
                                <div class="serviceFee-icon-text">
                                    <a-icon v-if="editTsItem !== 'ts'+index+'-1' && !isView && item.fywlwf!=='无'" class="serviceFee-icon" type="form" @click="displayDays(item,index,'-1')" />
                                    <a-input-number
                                     :id="'ts'+index+'-1'+'class'"
                                     v-if="editTsItem == 'ts'+index+'-1'"
                                     style="flex: 1;"
                                     placeholder="请输入天数"
                                     v-model="item.flwfts"
                                     :min="0" :precision="0"
                                     @blur="serviceFeeBlur({...item,flwfts:(item.flwfts == null)?'':item.flwfts})"
                                     />
                                    <span v-else>{{ item.flwfts }}</span>
                                </div>
                            </td>
                            <td class="serviceFee-icon-text-td">
                                <div class="serviceFee-icon-text">
                                    <a-icon v-if="editTsItem !== 'ts'+index+'-2' && !isView && item.fywlwf!=='无'" class="serviceFee-icon" type="form" @click="displayDays(item,index,'-2')" />
                                    <a-input-number
                                     :id="'ts'+index+'-2'+'class'"
                                     v-if="editTsItem == 'ts'+index+'-2'"
                                     style="flex: 1;"
                                     placeholder="请输入标准"
                                     v-model="item.flwfbz"
                                     :min="0" :precision="0"
                                     @blur="serviceFeeBlur({...item,flwfbz:(item.flwfbz == null)?'':item.flwfbz})"
                                     />
                                    <span v-else>{{ item.flwfbz }}元</span>
                                </div>
                            </td>
                            <td>
                                <div class="serviceFee-icon-text">
                                    <a-icon v-if="editTsItem !== 'ts'+index+'-3' && !isView && item.fywlwf!=='无'" class="serviceFee-icon" type="form" @click="displayDays(item,index,'-3')" />
                                    <a-input-number
                                     :id="'ts'+index+'-3'+'class'"
                                     v-if="editTsItem == 'ts'+index+'-3'"
                                     style="flex: 1;"
                                     placeholder="请输入金额"
                                     v-model="item.flwfsbje"
                                     :min="0" :precision="0"
                                     @blur="serviceFeeBlur({...item,flwfsbje:(item.flwfsbje == null)?'':item.flwfsbje})"
                                     :allowClear="true"
                                     />
                                    <span v-else>{{ item.flwfsbje }}元</span>
                                </div>
                            </td>
                            <td class="serviceFee-icon-text-td">
                                <div class="serviceFee-icon-text">
                                    <a-icon v-if="editTsItem !== 'ts'+index+'-4' && !isView" class="serviceFee-icon" type="form" @click="displayDays(item,index,'-4',item.fhsbzts)" />
                                    <a-input-number
                                     :id="'ts'+index+'-4'+'class'"
                                     v-if="editTsItem == 'ts'+index+'-4'"
                                     style="flex: 1;"
                                     placeholder="请输入天数"
                                     v-model="item.fhsbzts" :min="0" :precision="0"
                                     @blur="serviceFeeBlur({...item,fhsbzts:(item.fhsbzts == null)?'':item.fhsbzts})"
                                      />
                                    <span v-else>{{ item.fhsbzts }}</span>
                                </div>
                            </td>
                            <td class="serviceFee-icon-text-td">
                                <div class="serviceFee-icon-text">
                                    <a-icon v-if="editTsItem !== 'ts'+index+'-5' && !isView" class="serviceFee-icon" type="form" @click="displayDays(item,index,'-5')" />
                                    <a-input-number
                                     :id="'ts'+index+'-5'+'class'"
                                     v-if="editTsItem == 'ts'+index+'-5'"
                                     style="flex: 1;"
                                     placeholder="请输入标准"
                                     v-model="item.fhsbzbz"
                                     :min="0" :precision="0"
                                     @blur="serviceFeeBlur({...item,fhsbzbz:(item.fhsbzbz == null)?'':item.fhsbzbz})"
                                     />
                                    <span v-else>{{ item.fhsbzbz }}元</span>
                                </div>
                            </td>
                            <td>
                                <div class="serviceFee-icon-text">
                                    <a-icon v-if="editTsItem !== 'ts'+index+'-6' && !isView" class="serviceFee-icon" type="form" @click="displayDays(item,index,'-6')" />
                                    <a-input-number
                                        :id="'ts'+index+'-6'+'class'"
                                        v-if="editTsItem == 'ts'+index+'-6'"
                                        style="flex: 1;"
                                        placeholder="请输入金额"
                                        v-model="item.fhsbzsbje" :min="0" :precision="0"
                                        @blur="serviceFeeBlur({...item,fhsbzsbje:(item.fhsbzsbje == null)?'':item.fhsbzsbje})"
                                        />
                                    <span v-else>{{ item.fhsbzsbje }}元</span>
                                </div>
                            </td>
                            <td class="serviceFee-icon-text-td">
                                <div class="serviceFee-icon-text">
                                    <a-icon v-if="editTsItem !== 'ts'+index+'-7' && !isView" class="serviceFee-icon" type="form" @click="displayDays(item,index,'-7')" />
                                    <a-input-number
                                     :id="'ts'+index+'-7'+'class'"
                                     v-if="editTsItem == 'ts'+index+'-7'"
                                     style="flex: 1;"
                                     placeholder="请输入天数"
                                     v-model="item.fsnjtbzts" :min="0" :precision="0"
                                     @blur="serviceFeeBlur({...item,fsnjtbzts:(item.fsnjtbzts == null)?'':item.fsnjtbzts})"
                                    />
                                    <span v-else>{{ item.fsnjtbzts }}</span>
                                </div>
                            </td>
                            <td class="serviceFee-icon-text-td">
                                <div class="serviceFee-icon-text">
                                    <a-icon v-if="editTsItem !== 'ts'+index+'-8' && !isView" class="serviceFee-icon" type="form" @click="displayDays(item,index,'-8')" />
                                    <a-input-number
                                     :id="'ts'+index+'-8'+'class'"
                                     v-if="editTsItem == 'ts'+index+'-8'"
                                     style="flex: 1;"
                                     placeholder="请输入标准"
                                     v-model="item.fsnjtbzbz"
                                     :min="0" :precision="0"
                                     @blur="serviceFeeBlur({...item,fsnjtbzbz:(item.fsnjtbzbz == null)?'':item.fsnjtbzbz})"
                                     />
                                    <span v-else>{{ item.fsnjtbzbz }}元</span>
                                </div>
                            </td>
                            <td>
                                <div class="serviceFee-icon-text">
                                    <a-icon v-if="editTsItem !== 'ts'+index+'-9' && !isView" class="serviceFee-icon" type="form" @click="displayDays(item,index,'-9')" />
                                    <a-input-number
                                        :id="'ts'+index+'-9'+'class'"
                                        v-if="editTsItem == 'ts'+index+'-9'"
                                        style="flex: 1;"
                                        placeholder="请输入金额"
                                        v-model="item.fsnjtbzje" :min="0" :precision="0"
                                        @blur="serviceFeeBlur({...item,fsnjtbzje:(item.fsnjtbzje == null)?'':item.fsnjtbzje})"
                                        />
                                    <span v-else>{{ item.fsnjtbzje }}元</span>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>

            </div>
            <div v-if="currentSteps == 3" :style="{height:fromState.heightType =='model'?'calc(100vh - 195px)':(fromState.heightType =='isReviewVer'?'calc(100vh - 268px)':'calc(100vh - 225px)'),overflow: 'auto',}">
                <div class="reimbursement-summary-table-5">
                    <div class="tabs-card-edit-box">
                        <a-tabs type="card" v-model:activeKey="transportationActiveKey" @change="transportationActiveChange">
                            <a-tab-pane key="交通费填写" tab="交通费填写"></a-tab-pane>
                            <a-tab-pane key="机票信息">
                                <span id="step4-5" slot="tab">
                                    机票信息
                                </span>
                            </a-tab-pane>
                        </a-tabs>
                    </div>
                    <div  class="tab-box-v1" :style="{height: fromState.heightType =='model'?'calc(100vh - 240px)':(fromState.heightType =='isReviewVer'?'calc(100vh - 308px)':'calc(100vh - 270px)'),overflow: 'auto',paddingTop: '15px',}">
                        <div v-if="transportationActiveKey == '交通费填写'" style="display: flex;justify-content: center;">
                            <table
                                id="step4-1"
                                class="reimbursement-transportation-table" border="1" borderColor="#d9d9d9" cellspacing="0" style="width: calc(100% - 30px);border-color: #d9d9d9 !important;">
                                <tr style="background: #dee5ed !important;">
                                    <th>费用项目</th>
                                    <th>报销人员</th>
                                    <th id="step4-3">
                                        <span style="color:red;">* </span>
                                        出行方式
                                            <!-- mode="multiple" 可搜欧索  @popupScroll="popupScroll"-->
                                        <br/>
                                        <a-select v-if="!isView" style="width: 135px" @change="cxfsBlur($event,'')" placeholder="批量选择出行方式">
                                            <a-select-opt-group>
                                                <span slot="label">单位派车</span>
                                                <a-select-option value="单位派车">
                                                    单位派车
                                                </a-select-option>
                                            </a-select-opt-group>
                                            <a-select-opt-group label="公共交通">
                                                <a-select-option value="动车">
                                                    动车
                                                </a-select-option>
                                                <a-select-option value="飞机">
                                                    飞机
                                                </a-select-option>
                                                <a-select-option value="大巴">
                                                    大巴
                                                </a-select-option>
                                                <a-select-option value="其他交通方式">
                                                    其他交通方式
                                                </a-select-option>
                                            </a-select-opt-group>
                                        </a-select>
                                    </th>
                                    <th><span style="color:red;">* </span>出行情况</th>
                                    <th><span style="color:red;">* </span>出行日期</th>
                                    <th>是否他人帮垫付</th>
                                    <th>垫付人</th>
                                    <th><span style="color:red;">* </span>应付金额</th>
                                    <th style="width: 50px;"></th>
                                </tr>
                                <tr v-for="(item,index) in transportationList1" :key="index" :style="{background:item.bgColor?'#f0f0f1 !important':''}">
                                    <td :rowspan="item.list.length" v-if="item.list.length !== 0">
                                        城市间交通费
                                    </td>
                                    <td :rowspan="item.list.length" v-if="item.list.length !== 0">
                                        <span style="display: flex;justify-content: center;" v-if="item.realname && item.realname.length == 2">
                                            <span style="width: 48px;display: flex;justify-content: space-between;">
                                                <span v-for="(trem,tI) in item.realname.split('')" :key="tI" >
                                                    {{trem}}
                                                    <span v-if="tI+1 !== item.realname.split('').length">&nbsp;&nbsp;</span>
                                                </span>
                                            </span>
                                        </span>
                                        <span v-else style="display: flex;justify-content: center;">{{ item.realname }}</span>
                                        <a-button id="step4-2" class="green-btn" @click="nkBxJtxcdAdd(item)" icon="plus">添加路程</a-button>
                                    </td>
                                    <td id="step4-4">
                                        <!-- {{ item.fcsjjtfs }} -->
                                        <a-select

                                            v-if="!isView"
                                            :key="cxfsKey"
                                            size="small"
                                            placeholder="请选择出行方式"
                                            style="width: 131px"
                                            v-model="item.fcsjjtfs"
                                            @change="nkBxJtxcdEdit(item.fcsjjtfs=='飞机'?{...item,list:[],fsfgwkdfclfw:'否',fsfgwkdfclff:'否',fcsjjtfs:item.fcsjjtfs}:{...item,list:[],fcsjjtfs:item.fcsjjtfs})"
                                            >
                                            <a-select-opt-group>
                                                <span slot="label">单位派车</span>
                                                <a-select-option value="单位派车">
                                                    单位派车
                                                </a-select-option>
                                            </a-select-opt-group>
                                            <a-select-opt-group label="公共交通">
                                                <a-select-option value="动车">
                                                    动车
                                                </a-select-option>
                                                <a-select-option value="飞机">
                                                    飞机
                                                </a-select-option>
                                                <a-select-option value="大巴">
                                                    大巴
                                                </a-select-option>
                                                <a-select-option value="其他交通方式">
                                                    其他交通方式
                                                </a-select-option>
                                            </a-select-opt-group>
                                        </a-select>
                                        <span v-else>{{ item.fcsjjtfs }}</span><br/>
                                        <a-button v-if="item.fcsjjtfs == '飞机'" class="green-l-btn" style="margin-top: 5px;" @click="addTransfer(item)" icon="highlight">填写信息</a-button>
                                    </td>
                                    <td >
                                        <!-- {{ item.fwjtfqscs }}-{{ item.fwjtfddcs }} -->
                                        <div>
                                            <a-input v-if="!isView" :disabled="item.fcsjjtfs == '单位派车'" style="width: 130px;" v-model="item.fwjtfqscs" placeholder="起始城市" @blur="nkBxJtxcdEdit({fwjtfqscs:item.fwjtfqscs,id:item.id})" />
                                            <span v-else>{{ item.fwjtfqscs }}</span>
                                            -
                                            <a-input v-if="!isView" :disabled="item.fcsjjtfs == '单位派车'" style="width: 130px;" v-model="item.fwjtfddcs" placeholder="到达城市" @blur="nkBxJtxcdEdit({fwjtfddcs:item.fwjtfddcs,id:item.id})" />
                                            <span v-else>{{ item.fwjtfddcs }}</span>
                                        </div>
                                    </td>
                                            <!-- :default-value="item.fcsjjtwqsrq?[moment(item.fcsjjtwqsrq),moment(item.fcsjjtwddrq)]:[]" -->
                                    <td >
                                        <a-range-picker
                                            v-if="!isView"
                                            :default-value="item.fcsjjtwqsrq?[moment(item.fcsjjtwqsrq),moment(item.fcsjjtwddrq)]:[]"
                                            :disabled="item.fcsjjtfs == '单位派车'"
                                            @change="time1Change($event,'去',item.id)" />
                                        <span v-else>{{ item.fcsjjtwqsrq }} - {{ item.fcsjjtwddrq }}</span>
                                    </td>
                                    <td >
                                        <!-- {{ item.fwjtfsfdf }} -->
                                        <a-radio-group v-if="!isView" :disabled="item.fcsjjtfs == '单位派车'" name="radioGroup" v-model="item.fwjtfsfdf" @change="nkBxJtxcdEdit({fwjtfsfdf:item.fwjtfsfdf,id:item.id})">
                                            <a-radio value="是">是</a-radio>
                                            <a-radio value="否">否</a-radio>
                                        </a-radio-group>
                                        <span v-else>{{ item.fwjtfsfdf }}</span>
                                    </td>
                                    <td >
                                        <!-- {{ item.fwjtfdfrxm }} fwjtfdfrid -->
                                        <a-select v-if="!isView && item.fcsjjtfs !== '飞机'" :disabled="item.fwjtfsfdf == '否'" v-model="item.fwjtfdfrid" style="width: 120px" @change="nkBxJtxcdEdit({fwjtfdfrid:item.fwjtfdfrid,id:item.id})" placeholder="请选择垫付人">
                                            <a-select-option v-for="(trem,tIndex) in advancePaymentList[index]" :key="tIndex" :value="trem.id">{{ trem.realname }}</a-select-option>
                                        </a-select>
                                        <span v-else>{{ item.fwjtfdfrxm }}</span>
                                    </td>
                                    <td >
                                        <!-- {{ item.fwjtfsbje }} -->
                                        <a-input-number
                                            v-if="!isView"
                                            :disabled="item.fcsjjtfs == '单位派车'"
                                            placeholder="请输入应付金额"
                                            v-model="item.fwjtfybje"
                                            :min="0" :precision="2"
                                            @blur="nkBxJtxcdEdit({fwjtfybje:(item.fwjtfybje==null)?'':item.fwjtfybje,id:item.id})"
                                            />
                                        <span v-else>{{ item.fwjtfybje }}</span>
                                    </td>
                                    <td>
                                        <a-icon id="step4-6" v-if="item.list.length !== 1" type="delete" style="color: red;font-size: 18px;" @click="nkBxJtxcdDelete(item)"/>
                                    </td>

                                    <!-- <td v-if="((index+1) % 2 == 0) && item.fsfqc !== '是'">
                                        <a-select
                                            v-if="!isView"
                                            :key="cxfsKey"
                                            size="small"
                                            placeholder="请选择出行方式"
                                            style="width: 131px"
                                            v-model="item.fcsjjtfsf"
                                            @change="cxfsBlur(1,item.fcsjjtfsf=='飞机'?{...item,fsfgwkdfclfw:'否',fsfgwkdfclff:'否',fcsjjtfsf:item.fcsjjtfsf}:{...item,fcsjjtfsf:item.fcsjjtfsf})"
                                            >
                                            <a-select-opt-group>
                                                <span slot="label">单位派车</span>
                                                <a-select-option value="单位派车">
                                                    单位派车
                                                </a-select-option>
                                            </a-select-opt-group>
                                            <a-select-opt-group label="公共交通">
                                                <a-select-option value="动车">
                                                    动车
                                                </a-select-option>
                                                <a-select-option value="飞机">
                                                    飞机
                                                </a-select-option>
                                                <a-select-option value="大巴">
                                                    大巴
                                                </a-select-option>
                                                <a-select-option value="其他交通方式">
                                                    其他交通方式
                                                </a-select-option>
                                            </a-select-opt-group>
                                        </a-select>
                                        <span v-else>{{ item.fcsjjtfsf }}</span><br/>
                                        <a-button v-if="item.fcsjjtfsf == '飞机'" class="blue-btn" style="margin-top: 5px;" @click="addTransfer(item)">填写信息</a-button>
                                    </td>
                                    <td v-if="(index+1) % 2 == 0">
                                        <div>
                                            <a-input v-if="!isView" :disabled="item.fcsjjtfsf == '单位派车'" style="width: 130px;" v-model="item.ffjtfqscs" placeholder="请输入起始城市" @blur="nkBxJtxcdEdit({ffjtfqscs:item.ffjtfqscs,id:item.id})" />
                                            <span v-else>{{ item.ffjtfqscs }}</span>
                                            -
                                            <a-input v-if="!isView" :disabled="item.fcsjjtfsf == '单位派车'" style="width: 130px;" v-model="item.ffjtfddcs" placeholder="请输入到达城市" @blur="nkBxJtxcdEdit({ffjtfddcs:item.ffjtfddcs,id:item.id})" />
                                            <span v-else>{{ item.ffjtfddcs }}</span>
                                        </div>
                                    </td>
                                    <td v-if="(index+1) % 2 == 0">
                                        <a-range-picker
                                            v-if="!isView"
                                            :disabled="item.fcsjjtfsf == '单位派车'"
                                            :default-value="item.fcsjjtfqsrq?[moment(item.fcsjjtfqsrq),moment(item.fcsjjtfddrq)]:[]"
                                            @change="time1Change($event,'返',item.id)" />
                                        <span v-else>{{ item.fcsjjtfqsrq }} - {{ item.fcsjjtfddrq }}</span>
                                    </td>
                                    <td v-if="((index+1) % 2 == 0) && item.fsfqc !== '是'">
                                        <a-radio-group v-if="!isView" :disabled="item.fcsjjtfsf == '单位派车'" name="radioGroup" v-model="item.ffjtfsfdf" @change="nkBxJtxcdEdit({ffjtfsfdf:item.ffjtfsfdf,id:item.id})">
                                            <a-radio value="是">是</a-radio>
                                            <a-radio value="否">否</a-radio>
                                        </a-radio-group>
                                        <span v-else>{{ item.ffjtfsfdf }}</span>
                                    </td>
                                    <td v-if="((index+1) % 2 == 0) && item.fsfqc !== '是'">
                                        <a-select v-if="!isView && item.fcsjjtfsf !== '飞机'" :disabled="item.ffjtfsfdf == '否'" v-model="item.ffjtfdfrid" style="width: 120px" @change="nkBxJtxcdEdit({ffjtfdfrid:item.ffjtfdfrid,id:item.id})" placeholder="请选择垫付人">
                                            <a-select-option v-for="(trem,tIndex) in advancePaymentList[index]" :key="tIndex" :value="trem.id">{{ trem.realname }}</a-select-option>
                                        </a-select>
                                        <span v-else>{{ item.ffjtfdfrxm }}</span>
                                    </td>
                                    <td v-if="((index+1) % 2 == 0) && item.fsfqc !== '是'">
                                        <a-input-number
                                            v-if="!isView"
                                            :disabled="item.fcsjjtfsf == '单位派车'"
                                            placeholder="请输入应付金额"
                                            v-model="item.ffjtfybje"
                                            :min="0" :precision="2"
                                            @blur="nkBxJtxcdEdit({ffjtfybje:item.ffjtfybje,id:item.id})"
                                            />
                                            <span v-else>{{ item.ffjtfybje }}</span>
                                    </td> -->
                                </tr>
                            </table>
                        </div>
                        <div v-if="transportationActiveKey == '机票信息'" style="display: flex;justify-content: center;">
                            <commpVxeTable
                                :key="transportationTableKey"
                                :config="transportationTableConfig"
                                :columns="transportationColumnsVxe"
                                :formItem="[]"
                                :isCanWrap="true"
                                ref="specialRegistrationRef"
                            >
                                <template v-slot:operation_fzh="{row}" data-desc="账户">
                                    <span v-if="row.fzh">{{ row.fzh.replace(/(\d{4})(?=\d)/g, "$1 ") }}</span>
                                    <span v-else>{{ row.fzh }}</span>
                                </template>
                                <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                                    <a-form layout="inline" class="search-form" >
                                        <a-form-item >
                                            <a-button v-if="!isView" class="blue-btn" type="primary" @click="transportationEditClick(row)" icon="edit">修改</a-button>
                                        </a-form-item>
                                        <a-form-item >
                                            <a-button v-if="!isView" class="red-btn" type="primary" @click="transportationDeleteClick(row)" icon="delete">删除</a-button>
                                        </a-form-item>
                                    </a-form>
                                </template>
                            </commpVxeTable>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="currentSteps == 4" :style="{height:fromState.heightType =='model'?'calc(100vh - 195px)':(fromState.heightType =='isReviewVer'?'calc(100vh - 268px)':'calc(100vh - 225px)'),overflow: 'auto',}">
                <div style="display: flex;justify-content: center;">
                    <table class="reimbursement-transportation-table" border="1" borderColor="#d9d9d9" cellspacing="0" style="width: calc(100% - 30px);border-color: #d9d9d9 !important;">
                        <tr style="background: #dee5ed !important;">
                            <th>费用项目</th>
                            <th>报销人员</th>
                            <th>天&ensp;&ensp;数</th>
                            <!-- <th>住宿类型</th> -->
                            <th>是否他人帮垫付</th>
                            <th>垫付人</th>
                            <th><span style="color:red;">* </span>应付金额</th>
                        </tr>
                        <tr v-for="(item,index) in personnelList" :key="index" :style="{background:index % 2 !== 0?'#f0f0f1 !important':''}">
                            <td>
                                住宿费
                            </td>
                            <td>
                                <span style="display: flex;justify-content: center;" v-if="item.realname && item.realname.length == 2">
                                    <span style="width: 48px;display: flex;justify-content: space-between;">
                                        <span v-for="(trem,tI) in item.realname.split('')" :key="tI" >
                                            {{trem}}
                                            <span v-if="tI+1 !== item.realname.split('').length">&nbsp;&nbsp;</span>
                                        </span>
                                    </span>
                                </span>
                                <span v-else>{{ item.realname }}</span>
                            </td>
                            <td>
                                <div class="serviceFee-icon-text">
                                    <a-input-number
                                    v-if="!isFbxdzt"
                                    style="flex: 1;"
                                    placeholder="请输入天数"
                                    v-model="item.fzxfts"
                                    :min="0" :precision="0"
                                    @blur="transportationBlur({fzxfts:item.fzxfts?item.fzxfts:'',id:item.id})"
                                    />
                                    <span v-else>{{ item.fzxfts }}</span>
                                </div>
                                <!-- {{ item.fzxfts }} -->
                            </td>
                            <!-- <td>{{ item.fzxlx }}</td> -->
                            <td>
                                <a-radio-group v-if="!isView" name="radioGroup" v-model="item.fzxfsfdf" @change="transportationBlur({fzxfsfdf:item.fzxfsfdf,id:item.id})">
                                    <a-radio value="是">是</a-radio>
                                    <a-radio value="否">否</a-radio>
                                </a-radio-group>
                                <span v-else>{{ item.fzxfsfdf }}</span>
                            </td>
                            <td>
                                <a-select
                                v-if="!isView"
                                 :disabled="item.fzxfsfdf == '否'"
                                 v-model="item.fzxfdfrid"
                                 style="width: 120px" @change="transportationBlur({fzxfdfrid:item.fzxfdfrid,id:item.id})"
                                 placeholder="请选择垫付人">
                                    <a-select-option v-for="(trem,tIndex) in personnelAdvanceList[index]" :key="tIndex" :value="trem.id">{{ trem.realname }}</a-select-option>
                                </a-select>
                                <span v-else>{{ item.fzxfdfrxm }}</span>
                            </td>
                            <td>
                                <a-input-number
                                v-if="!isView"
                                placeholder="请输入应付金额"
                                v-model="item.fzxfybje"
                                :min="0" :precision="2"
                                @blur="transportationBlur({fzxfybje:(item.fzxfybje==null)?'':item.fzxfybje,id:item.id})"
                                />
                                <span v-else>{{ item.fzxfybje }}</span>
                            </td>
                        </tr>
                    </table>
                </div>

            </div>
            <div v-if="currentSteps == 5" :style="{height:fromState.heightType =='model'?'calc(100vh - 195px)':(fromState.heightType =='isReviewVer'?'calc(100vh - 268px)':'calc(100vh - 225px)'),overflow: 'auto',}">
                <div class="reimbursement-summary-table-5">
                    <div id="step6-1" class="tabs-card-edit-box">
                        <a-tabs type="card" v-model:activeKey="summaryActiveKey" @change="summaryActiveChange">
                            <a-tab-pane key="汇总表单" tab="汇总表单"></a-tab-pane>
                            <a-tab-pane key="特殊事项" tab="特殊事项"></a-tab-pane>
                            <a-tab-pane key="专家劳务费" tab="专家劳务费（个税）"></a-tab-pane>
                            <a-tab-pane key="无单位派车" tab="无单位派车" v-if="fromState.fsfywdwpc =='是'"></a-tab-pane>
                            <a-tab-pane key="报销明细" tab="报销明细"></a-tab-pane>
                        </a-tabs>
                    </div>
                    <div  class="tab-box-v1" :style="{height: fromState.heightType =='model'?'calc(100vh - 240px)':(fromState.heightType =='isReviewVer'?'calc(100vh - 308px)':'calc(100vh - 270px)'),overflow: 'auto'}">
                        <div v-if="summaryActiveKey == '汇总表单'" class="reimbursement-summary-1">
                            <div style="font-weight: 600;">
                                <h3 style="font-size: 22px;text-align: center;">
                                    费用报销单
                                </h3>
                                <div style="margin: 0 auto;width: calc(100% - 16px);display: flex;flex-direction: row;justify-content: space-between;">
                                    <span>单据号：{{ fromState.fdjh }}</span>
                                    <span>单位：元</span>
                                </div>
                            </div>
                            <table
                                id="step6-2"
                                :key="tableKey" class="reimbursement-transportation-table" border="1" borderColor="#d9d9d9" cellspacing="0" style="width: calc(100%);border-color: #d9d9d9 !important;">
                                <tr style="background: #dee5ed !important;">
                                    <th>审评内容</th>
                                    <td colspan="10">{{ fromState.fbxnrms }}</td>
                                    <th colspan="4">{{ fromState.fbxsjms }}</th>
                                </tr>
                                <tr style="background: #dee5ed !important;">
                                    <th rowspan="3">姓&ensp;&ensp;名</th>
                                    <th colspan="2">劳务费</th>
                                    <th colspan="8">差旅费</th>
                                    <th rowspan="3">报销帐号开户行/城市</th>
                                    <th rowspan="3" >报销帐号</th>
                                    <th rowspan="3">报销金额(劳务费/差旅费)</th>
                                    <!-- <th rowspan="3">签字/日期</th> -->
                                </tr>
                                <tr style="background: #dee5ed !important;">
                                    <th rowspan="2">天&ensp;&ensp;数</th>
                                    <th rowspan="2">金&ensp;&ensp;额</th>
                                    <th colspan="2">城市间交通费</th>
                                    <th colspan="2">住宿费</th>
                                    <th colspan="2">伙食补助费</th>
                                    <th colspan="2">市内交通费</th>
                                </tr>
                                <tr style="background: #dee5ed !important;">
                                    <!-- <th>出行方式</th> -->
                                    <th>起&ensp;&ensp;始</th>
                                    <th>金&ensp;&ensp;额</th>
                                    <th>天&ensp;&ensp;数</th>
                                    <th>金&ensp;&ensp;额</th>
                                    <th>天&ensp;&ensp;数</th>
                                    <th>金&ensp;&ensp;额</th>
                                    <th>天&ensp;&ensp;数</th>
                                    <th>金&ensp;&ensp;额</th>
                                </tr>
                                <tr v-for="(item,index) in transportationList1" :key="index" :style="{background:item.bgColor?'#f0f0f1 !important':''}">
                                    <td :rowspan="item.list.length" v-if="item.list.length !== 0">
                                        <!-- {{ item.realname }} -->
                                        <span style="display: flex;justify-content: center;" v-if="item.realname && item.realname.length == 2">
                                            <span style="width: 48px;display: flex;justify-content: space-between;">
                                                <span v-for="(trem,tI) in item.realname.split('')" :key="tI" >
                                                    {{trem}}
                                                    <span v-if="tI+1 !== item.realname.split('').length">&nbsp;&nbsp;</span>
                                                </span>
                                            </span>
                                        </span>
                                        <span v-else>{{ item.realname }}</span>
                                        <span style="display: block;">（{{item.fjcsf}}）</span>
                                    </td>
                                    <td :rowspan="item.list.length" v-if="item.list.length !== 0" class="serviceFee-icon-text-td">
                                        <div class="serviceFee-icon-text">
                                            <a-input-number
                                            v-if="!isFbxdzt"
                                            style="flex: 1;width: 65px;"
                                            placeholder="请输入天数"
                                            v-model="item.flwfts"
                                            :min="0" :precision="0"
                                            @blur="transportationBlur({flwfts:item.flwfts,id:item.fbxdgrid})"
                                            />
                                            <span v-else>{{ item.flwfts }}</span>
                                        </div>
                                    </td>
                                    <td :rowspan="item.list.length" v-if="item.list.length !== 0">
                                        {{item.flwfsbje}}
                                    </td>
                                    <td >

                                        <div v-if="!(item.fcsjjtfs == '单位派车' ||item.fcsjjtfs =='无单位派车')" style="display: flex;align-items: center;">
                                            <a-input v-if="!isFbxdzt" :disabled="item.fcsjjtfs == '单位派车' || item.fcsjjtfs =='无单位派车'" style="flex:1" v-model="item.fwjtfqscs" placeholder="请输入起始城市" @blur="nkBxJtxcdEdit({fwjtfqscs:item.fwjtfqscs,id:item.id})" />
                                            <span v-else>{{ item.fwjtfqscs }}</span>
                                            -
                                            <a-input v-if="!isFbxdzt" :disabled="item.fcsjjtfs == '单位派车' || item.fcsjjtfs =='无单位派车'" style="flex:1" v-model="item.fwjtfddcs" placeholder="请输入到达城市" @blur="nkBxJtxcdEdit({fwjtfddcs:item.fwjtfddcs,id:item.id})" />
                                            <span v-else>{{ item.fwjtfddcs }}</span>
                                        </div>
                                        <div v-else>/</div>
                                    </td>
                                    <td >
                                        <!-- <div v-if="!isFbxdzt">
                                            <a-input-number
                                            v-if="!(item.fcsjjtfs == '单位派车' ||item.fcsjjtfs =='无单位派车')"
                                            placeholder="请输入金额"
                                            v-model="item.fwjtfsbje"
                                            :min="0" :precision="2"
                                            @blur="nkBxJtxcdEdit({fwjtfsbje:item.fwjtfsbje,id:item.id})"
                                            />
                                            <span v-else>0.00</span>
                                        </div> -->
                                        <span style="display: block;">{{ item.fwjtfybje }}</span>
                                        <span v-if="item.fwjtfsfdf == '是'" style="font-size: 12px;">垫付人：{{ item.fwjtfdfrxm }}</span>
                                    </td>
                                    <td :rowspan="item.list.length" v-if=" item.list.length !== 0">
                                        <!-- {{ item.fzxfts }} -->
                                        <a-input-number
                                            v-if="!isFbxdzt"
                                            style="width: 70px;"
                                            placeholder="请输入天数"
                                            v-model="item.fzxfts"
                                            :min="0" :precision="0"
                                            @blur="transportationBlur({fzxfts:item.fzxfts,id:item.fbxdgrid})"
                                        />
                                        <span v-else>{{ item.fzxfts }}</span>
                                    </td>
                                    <td :rowspan="item.list.length" v-if="item.list.length !== 0">
                                        <a-input-number
                                            v-if="!isFbxdzt"
                                            placeholder="请输入应付金额"
                                            v-model="item.fzxfsbje"
                                            :min="0" :precision="2"
                                            @blur="transportationBlur({fzxfssbje:item.fzxfsbje,id:item.fbxdgrid})"
                                        />
                                        <span v-else style="display: block;">{{ item.fzxfsbje }}</span>
                                        <span v-if="item.fzxfsfdf == '是'" style="font-size: 12px;display: block;">垫付人：{{ item.fzxfdfrxm }}</span>
                                    </td>
                                    <!--  -->
                                    <td :rowspan="item.list.length" v-if="item.list.length !== 0" class="serviceFee-icon-text-td">
                                        <div class="serviceFee-icon-text">
                                            <a-input-number
                                            v-if="!isFbxdzt"
                                            style="flex: 1;width: 65px;"
                                            placeholder="请输入天数"
                                            v-model="item.fhsbzts" :min="0" :precision="0"
                                            @blur="transportationBlur({fhsbzts:item.fhsbzts,id:item.fbxdgrid})"
                                            />
                                            <span v-else>{{ item.fhsbzts }}</span>
                                        </div>
                                    </td>
                                    <td :rowspan="item.list.length" v-if="item.list.length !== 0">
                                        {{ item.fhsbzsbje }}
                                    </td>
                                    <td :rowspan="item.list.length" v-if="item.list.length !== 0" class="serviceFee-icon-text-td">
                                        <div class="serviceFee-icon-text">
                                            <a-input-number
                                            v-if="!isFbxdzt"
                                            style="flex: 1;width: 65px;"
                                            placeholder="请输入天数"
                                            v-model="item.fsnjtbzts" :min="0" :precision="0"
                                            @blur="transportationBlur({fsnjtbzts:item.fsnjtbzts,id:item.fbxdgrid})"
                                            />
                                            <span v-else>{{ item.fsnjtbzts }}</span>
                                        </div>
                                    </td>
                                    <td :rowspan="item.list.length" v-if="item.list.length !== 0">
                                        {{ item.fsnjtbzje }}
                                    </td>
                                    <!--  -->
                                    <td :rowspan="item.list.length" v-if="item.list.length !== 0">
                                        <span>{{ item.fkfh}}</span>
                                        /
                                        <span>{{ item.fkhhszd}}</span>
                                    </td>

                                    <td
                                        :rowspan="item.list.length"
                                        v-if="item.list.length !== 0"
                                        style="width: 130px;white-space: normal;word-wrap: break-word;word-break: break-all;">
                                        {{ item.fyhkh }}
                                    </td>
                                    <td :rowspan="item.list.length" v-if="item.list.length !== 0">
                                        <span style="display: block;">
                                            {{item.flwfsbje}}
                                            <span v-if="item.flwfsfjgs == '是'">+{{ item.flwfgsje }}(劳务个税)</span>
                                        </span>
                                        <!-- <hr> -->
                                        /{{item.fclfsbhjje}}
                                    </td>

                                    <!-- <td rowspan="2" v-if="(index+1) % 2 !== 0">
                                        签字日期
                                    </td> -->

                                    <!-- <td v-if="(index+1) % 2 == 0 && item.list.length == 0">
                                        <div v-if="!(item.fcsjjtfs == '单位派车' ||item.fcsjjtfs =='无单位派车')" style="display: flex;align-items: center;">
                                            <a-input v-if="!isFbxdzt" :disabled="item.fcsjjtfs == '单位派车' || item.fcsjjtfs =='无单位派车'" style="flex: 1;" v-model="item.ffjtfqscs" placeholder="起始城市" @blur="transportationBlur({ffjtfqscs:item.ffjtfqscs,id:item.id})" />
                                            <span v-else>{{ item.ffjtfqscs }}</span>
                                            -**
                                            <a-input v-if="!isFbxdzt" :disabled="item.fcsjjtfs == '单位派车' || item.fcsjjtfs =='无单位派车'" style="flex: 1;" v-model="item.ffjtfddcs" placeholder="到达城市" @blur="transportationBlur({ffjtfddcs:item.ffjtfddcs,id:item.id})" />
                                            <span v-else>{{ item.ffjtfddcs }}</span>
                                        </div>
                                        <div v-else>/</div>
                                    </td>
                                    <td v-if="(index+1) % 2 == 0 && item.list.length == 0">
                                        <div v-if="!isFbxdzt">
                                            <a-input-number
                                            v-if="!(item.fcsjjtfs == '单位派车' ||item.fcsjjtfs =='无单位派车')"
                                            placeholder="请输入应付金额"
                                            v-model="item.ffjtfsbje"
                                            :min="0" :precision="2"
                                            @blur="transportationBlur({ffjtfsbje:item.ffjtfsbje,id:item.fbxdgrid})"
                                            />
                                            <span v-else>0.00</span>
                                        </div>
                                        <span v-else style="display: block;">{{ item.ffjtfsbje }}</span>
                                        <span v-if="item.ffjtfsfdf == '是'" style="font-size: 12px;">垫付人：{{ item.ffjtfdfrxm }}</span>
                                    </td> -->

                                    <!-- <td v-if="(index+1) % 2 == 0">{{item.fclfsbhjje}}</td> -->
                                </tr>
                                <tr>
                                    <th>总计金额</th>
                                    <td colspan="13">{{fromState.fhjbxje}}</td>
                                </tr>
                                <tr>
                                    <th><span v-if="!isFbxdzt" style="color: red;">* </span>附单据</th>
                                    <td id="step6-3" colspan="13">
                                        <a-input v-if="!isFbxdzt" v-model="fromState.fbxdj" @blur="saveClick(true)" style="width: 200px;border-color: red;" placeholder="请输入附单据张数（大写）"></a-input>
                                        <span v-else>
                                            {{ fromState.fbxdj }}
                                        </span>
                                        <span> 张</span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div v-if="summaryActiveKey == '特殊事项'" class="reimbursement-summary-1">
                            <a-button class="green-btn" type="primary" @click="uploadFilesListOther(false)" icon="eye">特殊事项-其他 附件列表查看</a-button>
                            <div v-if="allSpecialList.length > 0">
                                <div v-for="(item,index) in allSpecialList" :key="index" style="margin-bottom: 15px;">
                                    <div class="table-hear">
                                        <h3>xx壮族自治区食品药品审评查验中心报账特殊情况申请表</h3>
                                    </div>
                                    <table class="reimbursement-transportation-table" border="1" borderColor="#d9d9d9" cellspacing="0" style="width: calc(100%);border-color: #d9d9d9 !important;">
                                        <tr style="background: #dee5ed !important;">
                                            <th colspan="4">审评内容</th>
                                        </tr>
                                        <tr>
                                            <td class="special-table-lable-td">申请科室</td>
                                            <td>{{ fromState.fjbks }}</td>
                                            <td class="special-table-lable-td">申请人</td>
                                            <td>{{ fromState.fjbr }}</td>
                                        </tr>
                                        <tr>
                                            <td class="special-table-lable-td">项目内容</td>
                                            <td>{{ fromState.fbxnrms }}</td>
                                            <td class="special-table-lable-td">项目时间</td>
                                            <td>{{ fromState.fbxsjms }}</td>
                                        </tr>
                                        <tr>
                                            <td class="special-table-lable-td">申请日期</td>
                                            <td>
                                                <!-- <a-date-picker v-if="!isFbxdzt" :defaultValue="item.fsqrq?moment(item.fsqrq):undefined" placeholder="请选择申请日期" @change="$event=>{saveSpecial({id:item.id,fsqrq:item.fsqrq?moment($event).format('YYYY-MM-DD'):''})}"/> -->
                                                <span>{{ item.fsqrq?moment($event).format('YYYY-MM-DD'):'' }}</span>
                                            </td>
                                            <td class="special-table-lable-td">特殊情况申请天数</td>
                                            <td>
                                                <!-- <a-input-number
                                                    v-if="!isFbxdzt"
                                                    style="width: 180px;"
                                                    placeholder="请输入特殊情况申请天数"
                                                    :defaultValue="item.fsqts"
                                                    :min="0" :precision="0"
                                                    @blur="saveSpecial({id:item.id,fsqts:item.fsqts})"
                                                /> -->
                                                <span>{{ item.fsqts }}</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="special-table-lable-td">
                                                <div style="display: flex;justify-content: center;">
                                                    <span style="width: 64px;display: flex;justify-content: space-between;">
                                                        <span>金</span>
                                                        <span>额</span>
                                                    </span>
                                                </div>

                                            </td>
                                            <td style="text-align: left;">
                                                <!-- <a-input-number
                                                v-if="!isFbxdzt"
                                                style="width: 180px;"
                                                placeholder="请输入金额"
                                                v-model="item.fsqje"
                                                :min="0" :precision="2" /> -->
                                                <span>{{ item.fsqje }}</span>
                                            </td>
                                        </tr>
                                        <tr style="background: #dee5ed !important;" v-if="item.fsqlx == '超期产生' || item.fsqlx == '超期产生和午休房'">
                                            <th colspan="4">超期产生额外费用报销填报</th>
                                        </tr>
                                        <tr v-if="item.fsqlx == '超期产生' || item.fsqlx == '超期产生和午休房'">
                                            <td class="special-table-lable-td">特殊情况说明</td>
                                            <td style="text-align: left;">
                                                <!-- <a-textarea
                                                    v-if="!isFbxdzt"
                                                    style="width: 100%;"
                                                    v-model="item.fewfybxsm"
                                                    :autosize="{ minRows: 1, maxRows: 10000 }"
                                                    placeholder="请输入特殊情况说明"
                                                    @blur="saveSpecial({id:item.id,fewfybxsm:item.fewfybxsm})"
                                                ></a-textarea> -->
                                                <span>{{ item.fewfybxsm }}</span>
                                            </td>
                                            <td class="special-table-lable-td">申请人签字确认</td>
                                            <td>
                                                <div style="display: flex;align-items: center;">
                                                    {{ item.fewfybxsqrxm }}
                                                    <!-- <a-textarea
                                                        style="width: 100%;"
                                                        :readOnly="true"
                                                        v-model="item.fewfybxsqrxm"
                                                        :autosize="{ minRows: 1, maxRows: 10000 }"
                                                        placeholder="申请人签字确认"
                                                    ></a-textarea>
                                                    <a-button v-if="!isFbxdzt" class="blue-btn" style="margin-left: 10px;" type="primary" @click="overdueReimbursementClick({id:item.id,fewfybxsqrid:item.fewfybxsqrid})">选择申请人</a-button> -->
                                                </div>
                                            </td>
                                        </tr>
                                        <tr style="background: #dee5ed !important;" v-if="item.fsqlx == '午休房' || item.fsqlx == '超期产生和午休房'">
                                            <th colspan="4">午休房报销填报</th>
                                        </tr>
                                        <tr v-if="item.fsqlx == '午休房' || item.fsqlx == '超期产生和午休房'">
                                            <td class="special-table-lable-td">项目地址</td>
                                            <td style="text-align: left;">
                                                <!-- <a-textarea
                                                    v-if="!isFbxdzt"
                                                    style="width: 100%;"
                                                    v-model="item.fwxfbxxmdz"
                                                    :autosize="{ minRows: 1, maxRows: 10000 }"
                                                    placeholder="请输入项目地址"
                                                    @blur="saveSpecial({id:item.id,fwxfbxxmdz:item.fwxfbxxmdz})"
                                                ></a-textarea> -->
                                                <span>{{ item.fwxfbxxmdz }}</span>
                                            </td>
                                            <td class="special-table-lable-td">工作地址</td>
                                            <td style="text-align: left;">
                                                <!-- <a-textarea
                                                    v-if="!isFbxdzt"
                                                    style="width: 100%;"
                                                    v-model="item.fwxfbxgzdz"
                                                    :autosize="{ minRows: 1, maxRows: 10000 }"
                                                    placeholder="请输入工作地址"
                                                    @blur="saveSpecial({id:item.id,fwxfbxgzdz:item.fwxfbxgzdz})"
                                                ></a-textarea> -->
                                                <span>{{ item.fwxfbxgzdz }}</span>
                                            </td>
                                        </tr>
                                        <tr v-if="item.fsqlx == '午休房' || item.fsqlx == '超期产生和午休房'">
                                            <td class="special-table-lable-td">申请人签字确认</td>
                                            <td colspan="3">
                                                <div style="display: flex;align-items: center;">
                                                    {{ item.fwxfsqrxm }}
                                                    <!-- <a-textarea
                                                        :readOnly="true"
                                                        style="width: 100%;"
                                                        v-model="item.fwxfsqrxm"
                                                        :autosize="{ minRows: 1, maxRows: 10000 }"
                                                        placeholder="申请人签字确认"
                                                    ></a-textarea>
                                                    <a-button v-if="!isFbxdzt" class="blue-btn" style="margin-left: 10px;" type="primary" @click="noonBreakClick({id:item.id,fwxfsqrid:item.fwxfsqrid})">选择申请人</a-button> -->
                                                </div>
                                            </td>
                                        </tr>
                                        <tr style="background: #dee5ed !important;" v-if="item.fsqlx == '无单位派车'">
                                            <th colspan="4">无单位派车填报</th>
                                        </tr>
                                        <tr v-if="item.fsqlx == '无单位派车'">
                                            <td class="special-table-lable-td">无单位派车填报说明</td>
                                            <td colspan="3" style="text-align: left;">
                                                <!-- <a-textarea
                                                    v-if="!isFbxdzt"
                                                    style="width: 100%;"
                                                    v-model="item.fewfybxsm"
                                                    :autosize="{ minRows: 1, maxRows: 10000 }"
                                                    placeholder="请输入无城市间交通费/无住宿说明"
                                                    @blur="saveSpecial({id:item.id,fewfybxsm:item.fewfybxsm})"
                                                ></a-textarea> -->
                                                <span>{{ item.fewfybxsm }}</span>
                                            </td>
                                        </tr>
                                        <tr v-if="item.fsqlx == '无单位派车'">
                                            <td class="special-table-lable-td">申请人签字确认</td>
                                            <td colspan="3">
                                                <div style="display: flex;align-items: center;">
                                                    {{ item.fewfybxsqrxm }}
                                                    <!-- <a-textarea
                                                        :readOnly="true"
                                                        style="width: 100%;"
                                                        v-model="item.fewfybxsqrxm"
                                                        :autosize="{ minRows: 1, maxRows: 10000 }"
                                                        placeholder="申请人签字确认"
                                                    ></a-textarea>
                                                    <a-button v-if="!isFbxdzt" class="blue-btn" style="margin-left: 10px;" type="primary" @click="noonBreakClick({id:item.id,fewfybxsqrid:item.fewfybxsqrid})">选择申请人</a-button> -->
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="special-table-lable-td">附件列表</td>
                                            <td colspan="3">
                                                <uploadFilesList
                                                    :key="item.id"
                                                    :config="{isUpload: false}"
                                                    :filesFormState="{...item}"/>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <div v-else>
                                <a-empty />
                            </div>
                        </div>
                        <div v-if="summaryActiveKey == '专家劳务费'" class="reimbursement-summary-1">
                            <div class="table-hear">
                                <h3>{{ fromState.fjcqymc }}专家劳务费</h3>
                            </div>
                            <table class="reimbursement-transportation-table" border="1" borderColor="#d9d9d9" cellspacing="0" style="width: calc(100%);border-color: #d9d9d9 !important;">
                                <tr style="background: #dee5ed !important;">
                                    <th>序&ensp;&ensp;号</th>
                                    <th>姓&ensp;&ensp;名</th>
                                    <th>身份证号</th>
                                    <th>单&ensp;&ensp;位</th>
                                    <th>职&ensp;&ensp;称</th>
                                    <th>劳务费税前金额</th>
                                    <th>个&ensp;&ensp;税</th>
                                    <th>劳务费实发金额</th>
                                    <th>银行卡号</th>
                                </tr>
                                <tr v-for="(item,index) in expertServicesList" :key="index" :style="{background:index % 2 !== 0?'#f0f0f1 !important':''}">
                                    <td>{{ index+1 }}</td>
                                    <td>{{ item.realname }}</td>
                                    <td>{{ item.fsfzh }}</td>
                                    <td>{{ item.fgzdw }}</td>
                                    <td>{{ item.fzc }}</td>
                                    <td>{{ item.flwfsqje }}</td>
                                    <td>{{ item.flwfgsje }}</td>
                                    <td>{{ item.flwfsbje }}</td>
                                    <td>{{ item.fyhkh }}</td>
                                </tr>
                                <tr :style="{background:(expertServicesList.length - 1) / 2 !== 0?'#f0f0f1':''}">
                                    <th>合&ensp;&ensp;计</th>
                                    <td colspan="8">{{ expertServicesTotal }}</td>
                                </tr>
                                <tr :style="{background:(expertServicesList.length - 1) / 2 == 0?'#f0f0f1':''}">
                                    <td colspan="9">
                                        备注：当劳务费小于800元，不缴个税，劳务费税前金额=实发金额；当劳务费大于800且没超过4000元，劳务费税前金额=（劳务费实发金额-160）/0.8，个税=(劳务费税前金额- 800元)*20%。
                                    </td>
                                </tr>
                                <!-- <tr>
                                    <td>部门负责人</td>
                                    <td>{{ fromState. }}</td>
                                    <td>经办人</td>
                                    <td colspan="2"></td>
                                    <td>审核</td>
                                    <td colspan="2"></td>
                                </tr> -->
                            </table>
                        </div>
                        <div v-if="summaryActiveKey == '报销明细'" class="reimbursement-summary-1">
                            <div class="table-hear">
                                <h3>{{ fromState.fjcqymc }}报销明细</h3>
                            </div>
                            <table class="reimbursement-transportation-table" border="1" borderColor="#d9d9d9" cellspacing="0" style="width: calc(100%);border-color: #d9d9d9 !important;">
                                <tr style="background: #dee5ed !important;">
                                    <th style="width: 70px;">姓&ensp;&ensp;名</th>
                                    <th>工作单位</th>
                                    <th>审评身份</th>
                                    <th>审评企业名称</th>
                                    <th>企业地址</th>
                                    <th>审评事项名称 </th>
                                    <th>报销分类</th>
                                    <th style="width: 70px;">实报合计费用</th>
                                </tr>
                                <tr v-for="(item,index) in bxmxList" :key="index" :style="{background:index % 2 !== 0?'#f0f0f1 !important':''}">
                                    <td>
                                        <span style="display: flex;justify-content: center;" v-if="item.realname && item.realname.length == 2">
                                            <span style="width: 48px;display: flex;justify-content: space-between;">
                                                <span v-for="(trem,tI) in item.realname.split('')" :key="tI" >
                                                    {{trem}}
                                                    <span v-if="tI+1 !== item.realname.split('').length">&nbsp;&nbsp;</span>
                                                </span>
                                            </span>
                                        </span>
                                        <span v-else>{{ item.realname }}</span>
                                    </td>
                                    <td>{{ item.fgzdw }}</td>
                                    <td>{{ item.fjcsf }}</td>
                                    <td>{{ item.fjcqymc }}</td>
                                    <td>{{ item.fqydz }}</td>
                                    <td>{{ item.fjcsxmc }}</td>
                                    <td>{{ item.fbxxmfl1 }}</td>
                                    <td>{{ item.fsbhjfy }}</td>
                                </tr>
                                <tr v-if="bxmxList.length == 0">
                                    <td colspan="8">暂无数据</td>
                                </tr>
                            </table>
                        </div>
                        <div v-if="summaryActiveKey == '无单位派车'" class="reimbursement-summary-1">
                            <table class="reimbursement-transportation-table" border="1" borderColor="#d9d9d9" cellspacing="0" style="width: calc(100%);border-color: #d9d9d9 !important;">
                                <tr>
                                    <th colspan="4">
                                        <div class="table-hear">
                                            <h3>费用报销说明</h3>
                                        </div>
                                    </th>
                                </tr>
                                <tr>
                                    <th style="background-color: #e6f7ff;">审评内容及审评时间</th>
                                    <td>{{fromState.fbxnrms}}/{{fromState.fbxsjms}}</td>
                                    <th style="width: 146px;background-color: #e6f7ff;">有无单位派车</th>
                                    <td style="width: 146px;">无</td>
                                </tr>
                                <tr>
                                    <th style="width: 146px;background-color: #e6f7ff;">无城市间交通费/无住宿说明</th>
                                    <td colspan="3">
                                        <a-textarea
                                            placeholder="请输入无城市间交通费/无住宿说明"
                                            v-model:value="fromState.fwcsjtzssm"
                                            :autosize="{ minRows: 1, maxRows: 10000 }"
                                            @blur="transportationBlur({fwcsjtzssm:fromState.fwcsjtzssm})"
                                        ></a-textarea>
                                    </td>
                                </tr>
                                <tr>
                                    <th style="background-color: #e6f7ff;">审评人员签字确认</th>
                                    <td colspan="3" style="text-align: left;">{{ fromState.fwcsjtzssmqzrxm }}</td>
                                </tr>
                                <tr>
                                    <td colspan="4" style="text-align: left;">填写说明：1、审评内容及审评时间根据报销单填写。2、有无单位派车若无，填写“无”。3、审评组人员需附此表方可报销市区交通补助费，经办人负责督办</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div style="display: flex;justify-content: flex-end;margin: 0 15px;margin-top: 5px;" v-if="!isView">
                <a-button v-if="currentSteps !== 5" class="blue-btn" type="primary" style="margin-right: 10px;" icon="folder" @click="saveClick(true)">保存</a-button>
                <a-button v-if="!isFbxdzt" type="primary" style="margin-right: 10px;" ghost icon="arrow-left" @click="saveClick(false,'上一步')">上一步</a-button>
                <a-button v-if="currentSteps !== 5 " type="primary" style="margin-right: 10px;" ghost icon="arrow-right" @click="saveClick(false,'下一步')">下一步</a-button>
                <a-button v-if="currentSteps == 5" id="step6-4" class="blue-btn" type="primary" style="margin-right: 10px;" icon="folder" @click="totalPrintClick(true)">打包打印</a-button>
                <a-button v-if="currentSteps == 5 && !isFbxdzt" id="step6-5" class="blue-btn" type="primary" style="margin-right: 10px;" icon="check-circle" @click="saveClick(false,'下一步',true)">完成</a-button>
            </div>
        </div>
        <addPersonnel ref="addPersonnelRef" @dataTableChange="dataTableChange"/>
        <selectPersonnel ref="selectPersonnelRef" @dataTableChange="dataTableChange"/>
        <additionalReimbursement ref="additionalReimbursementRef" @updataFsfytssxsq="updataFsfytssxsq" @newSpecialData="newSpecialData" /><!--新增编辑特殊事项-->
        <selectApplicant ref="selectApplicantRef" @getApplicantData="getApplicantData"/>
        <addApplicationForTransferForm  ref="addApplicationForTransferFormRef" @updatezzsquSuccess="updatezzsquSuccess"/>
        <totalPrint ref="totalPrintRef" />
        <uploadFilesOther ref="uploadFilesOtherRef" />
    </div>
</template>
<script>
import {
    jcyfybxdqueryBxryxxListBySqsxId,//初始化及查询报销单信息
    jcyfybxddeleteBxrymxById,
    jcyfybxdupdateBxd,//保存
    jcyfybxdreturnFybxd,//上一步
    jcyfybxdsubmitFybxd,//下一步
    jcyfybxddeleteFybxdTssxSq,
    jcyfybxdqueryBxryxxListByBxdId,
    jcyfybxdupdateBxrymxxx,
    spcyjcyfybxdTybxjlxx,
    jcyfybxdbatchSetBxdCxfs,
    jcyfybxdqueryFybxdDfryList,
    jcyfybxdqueryFybxdTssxSqPageList,
    jcyfybxdupdateFybxdTssxSq,
    jcyfybxdqueryZjlwfList,
    jcyfybxdbatchSzLwHsJtbzTs,
    initBzFlow,//发起流程
    jcyfybxdNkBxJtxcdList,
    jcyfybxdNkBxJtxcdAdd,
    jcyfybxdNkBxJtxcdEdit,
    jcyfybxdNkBxJtxcdDelete,
    zzrybxdDeletzzsq,
    tssqsqPdsfnsc,
    tssqsqSctssx,
    spcyjcyfybxdGetbxmx,
    tssqsqqueryJobByJobId,
    tssqsqreturnUpperzdyFlowJob,
    tssqsqchjk,
    guideCzzyBxdZt,
    guideTgBxdZt,
    guideCzBxdZt,
} from './service/index'
import additionalReimbursement from './additionalReimbursement'
import assessCheckApi from './service/api'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import addPersonnel from './addPersonnel'
import selectPersonnel from './selectPersonnel'
import compSelector from '@/components/compSelector/compSelector.vue'
import selectApplicant from './selectApplicant.vue'
import addApplicationForTransferForm from './applicationForTransferForm'
import moment from 'moment'
import totalPrint from './totalPrint.vue'
import uploadFilesOther from './uploadFilesOther'
import uploadFilesList from '@/views/administrativeOffice-new/modal/uploadFilesList'
export default {
    components:{
        commpVxeTable,
        addPersonnel,
        compSelector,
        selectPersonnel,
        additionalReimbursement,
        selectApplicant,
        addApplicationForTransferForm,
        totalPrint,
        uploadFilesOther,
        uploadFilesList,
    },
    props:{
        rowData: {
            type:[Object],
            default: () => {},
            required:false
        },
    },
    data(){
        return{
            moment:moment,
            currentSteps:0,
            fbxdztList:['报销人员信息','特殊事项申请','劳务费','交通费','住宿费','汇总表单'],
            fromState:{},
            dataTableKey:null,
            dataTableConfig:{
                api: assessCheckApi.jcyfybxdqueryBxryxxListByBxdId,
                rowId: 'id',
                autoHidden:true,
                height:window.innerHeight - 400,
                urlType: true,
                paramet:{
                }
            },
            columnsVxe:[{
                type: 'checkbox',
                width: 60 ,
                fixed: 'left'
            },{
                title: '姓名', //列头显示文字
                field: 'realname',
                slots: {
                    header:'realname_header',
                    default: 'realname_name'
                },
                titleInterval:true,
                width:90,
            },
            // {
            //     title: '性别', //列头显示文字
            //     field: 'sex',
            //     titleInterval:true,
            //     slots: {
            //         header:'sex_header',
            //         default:'sex_default',
            //     },
            //     width:70,
            // },
            {
                title: '工作单位',
                field: 'fgzdw',

            },{
                title: '审评身份', //列头显示文字
                field: 'fjcsf',
                width:92,
            },{
                title: '银行卡号', //列头显示文字
                field: 'fyhkh',
                width:195,
            },{
                title: '开户行', //列头显示文字
                field: 'fkfh',
                width:115,
            },{
                title: '开户行所在地', //列头显示文字
                field: 'fkhhszd',
            },{
                title: '手机号码', //列头显示文字
                field: 'phone',
                width: 130,
            },{
                title: '操作',
                field: 'id',
                slots: { default: 'operation_btn' },
                fixed: 'right',
                width:300,
            }],
            isSpecial:'',
            specialDataTableKey:null,
            specialDataTableConfig:{
                api: assessCheckApi.jcyfybxdqueryFybxdTssxSqPageList,
                rowId: 'id',
                height:window.innerHeight - 290,
                autoHidden:true,
                urlType: true,
                paramet:{
                }
            },
            specialColumnsVxe:[{
                type: 'checkbox',
                width: 60 ,
                fixed: 'left'
            },{
                title: '项目内容', //列头显示文字
                field: 'fxmnr',
            },{
                title: '项目时间', //列头显示文字
                field: 'fxmsj',
            },{
                title: '申请日期', //列头显示文字
                field: 'fsqrq',
                width: 120,
            },{
                title: '审评员信息', //列头显示文字
                field: 'fewfybxsqrxm',
                slots: { default: 'fewfybxsqrxm_fwxfsqrxm' },
            },{
                title: '是否已发起', //列头显示文字
                field: 'fsffqlc',
                slots: { default: 'operation_fsffqlc' },
                width: 120,
            },{
                title: '操作',
                field: 'id',
                slots: { default: 'operation_btn' },
                fixed: 'right',
                width: 190,
            }],
            personnelList:[],
            editTsItem:'',
            transportationList:[],
            transportationList1: [],
            cxfsKey:null,
            cxfsSyArr:'',
            transportationEditItem:'',
            advancePaymentList:[],
            personnelAdvanceList:[],
            summaryActiveKey:'汇总表单',
            allSpecialList:[],
            expertServicesList:[],
            expertServicesTotal:0,//parseFloat(sum.toFixed(2))
            isFbxdzt:false,
            isView:false,
            reimbursementServiceFeeId:'reimbursementServiceFee'+Date.now(),
            reimbursementServiceFeeHeight:911,
            tableKey: '',
            bxmxList: [],
            transportationActiveKey: '交通费填写',
            transportationTableKey: '',
            transportationTableConfig:{
                api: assessCheckApi.zzrybxdselectzzsq,
                rowId: 'id',
                height:window.innerHeight - 280,
                autoHidden:true,
                urlType: true,
                paramet:{
                    fbxdid: ''
                }
            },
            transportationColumnsVxe:[
            {
                title: '往返程', //列头显示文字
                field: 'fwfqk',
                width: 100,
            },{
                title: '收款单位', //列头显示文字
                field: 'fskdw',
            },{
                title: '开户银行', //列头显示文字
                field: 'fkhyh',
            },{
                title: '账户', //列头显示文字
                field: 'fzh',
                slots: { default: 'operation_fzh' },
                width: 250,
            },{
                title: '转账金额', //列头显示文字
                field: 'fjexx',
                width: 100,
            },{
                title: '操作',
                field: 'id',
                slots: { default: 'operation_btn' },
                fixed: 'right',
                width:180,
            }],
            initiateOrNot: true,
            stepsList: [
                {
                    steps:[
                        {
                            element: '#step1-1',
                            title: '报销内容修改',
                            intro: '当前区域可对报销内容进行修改，填写完成后点击右侧的确认修改按钮。',
                            // auto\top\right\bottom\left\top-left\top-right\bottom-left\bottom-right
                            position: 'bottom'  // 提示框的位置
                        },{
                            element: '#step1-2',
                            title: '报销人员列表',
                            intro: '此列表展示报销人员信息，请对人员信息进行补充完整。<span style="color:red;">注意：银行卡号、开户行、开户行所在地不能为空</span>',
                        },{
                            element: '#step1-3',
                            title: '报销人员添加',
                            intro: '如果想要添加报销人员，可以点击按钮勾选人员。',
                        },{
                            element: '#step1-4',
                            title: '报销人员添加',
                            intro: '如果左侧按钮列表中没有想要添加的人员，可以点击按钮单独填写人员信息。',
                        },{
                            element: '#step1-5',
                            title: '报销人员信息操作',
                            intro: '可以在这里点击修改人员信息或删除人员。',
                        },
                    ]
                },{
                    steps:[
                        {
                            element: '#step2-1',
                            title: '超期产生费用',
                            intro: '当项目天数超出预期天数，产生超期费用时，点此填写信息并发起流程。',
                        },{
                            element: '#step2-2',
                            title: '午休房',
                            intro: '当产生午休房费用时，点此填写信息并发起流程。',
                        },{
                            element: '#step2-3',
                            title: '无单位派车',
                            intro: '如果有审评员出行方式为无单位派车时(除了单位派车以外的出行方式)，点此填写信息并发起流程。',
                        },
                    ]
                },{
                    steps:[
                        {
                            element: '#step3-1',
                            title: '实际天数',
                            intro: '系统默认天数使用审评天数，可根据实际天数，点击实际天数选项【审评天数+1】、【审评天数+2】。',
                        },{
                            element: '#step3-2',
                            title: '提示',
                            intro: '请注意提示信息。',
                        },{
                            element: '.step3-3',
                            title: '填写数据',
                            intro: '天数，标准，费用皆可修改，若系统生成有误，可根据实际数据修改。<span style="color:red;">注意：标红星部分为必填项</span>。',
                        },
                    ]
                },{
                    steps:[
                        {
                            element: '#step4-1',
                            title: '交通费填写',
                            intro: '此表格可以填写交通费明细。',
                        },{
                            element: '#step4-2',
                            title: '添加路程',
                            intro: '系统默认生成两条交通记录，可根据实际情况添加路程。',
                        },{
                            element: '#step4-3',
                            title: '批量选择出行方式',
                            intro: '如果审评组所有人的出行方式一样，可以在此处<span style="color:red;">批量设置</span>。<span style="color:red;">注意：会修改已选择的出行方式，请确认是否批量选择</span>。',
                        },{
                            element: '#step4-4',
                            title: '出行方式',
                            intro: '请根据实际情况选择出行方式，如果出行方式为飞机，选择框下方会出现填写飞机票信息的按钮，请点击填写飞机票信息。',
                        },{
                            element: '#step4-5',
                            title: '机票信息',
                            intro: '如有填写飞机票信息，可点此切换页面查看，可在此对<span style="color:red;">机票信息</span>进行<span style="color:red;">修改</span>和<span style="color:red;">删除</span>。',
                        },{
                            element: '#step4-6',
                            title: '数据删除',
                            intro: '如果有多余的数据，可以点此<span style="color:red;">删除</span>。',
                        },
                    ]
                },{
                    steps:[]
                },{
                    steps:[
                        {
                            element: '#step6-1',
                            title: '汇总表单',
                            intro: '可以点此列表标签切换查看所形成的表单。注意：<span style="color:red;">报销明细在点击完成按钮提交后再生成数据</span>。',
                        },{
                            element: '#step6-2',
                            title: '费用报销单',
                            intro: '如果数据有误，可以在此修改，如果没有修改的权限，需要点击右下角的【上一步】按钮，返回修改。',
                        },{
                            element: '#step6-3',
                            title: '单据数量',
                            intro: '单据数量为<span style="color:red;">必填项</span>，请记得填写<span style="color:red;">（中文大写）</span>。',
                        },{
                            element: '#step6-4',
                            title: '打印',
                            intro: '如果需要打印所形成的表单，可以点此按钮查看和打印。',
                        },{
                            element: '#step6-5',
                            title: '完成',
                            intro: '如确认所有数据填写完毕且无误后，点此完成并提交。<span style="color:red;">点击确认后，数据不可修改</span>。',
                        },
                    ]
                }
            ],
            isNeedGuide: false,
            reimbursementContentKey:null,
        }
    },
    watch:{
        rowData:{
            handler (newval, oldVal) {
                if(newval){
                    //console.log('我在变化',newval)
                    this.getData(newval)
                }
            },
            immediate: true,
            deep: true
        },
    },
    mounted(){
        // this.getData({sqsxid:'1675792718531424258',view:true})
        this.getGuide()
    },
    methods:{
        getData(row,val){
            this.fromState = row
            //console.log('报销单传参',row)
            this.isView = row.view?true:false
            this.dataTableConfig.height =  row.heightType =='model'?window.innerHeight - 300:window.innerHeight - 330
            this.specialDataTableConfig.height =  row.heightType =='model'?window.innerHeight - 260:(row.heightType =='isReviewVer'?window.innerHeight - 335:window.innerHeight - 290)
            let ztVal = row.heightType =='model'?true:false
            jcyfybxdqueryBxryxxListBySqsxId({sqsxid:row.sqsxid,bxdid:row.bxdid?row.bxdid:''}).then(res=>{
                if(res.code == 200){
                    //console.log('报销单所有信息',res)
                    this.currentSteps = this.fbxdztList.indexOf(res.result.bxd.fbxdzt=='完成'?'汇总表单':res.result.bxd.fbxdzt)
                    this.bxmxList = []
                    // this.bxmxList = res.result.bxmxList
                    if(this.currentSteps == 2){
                        this.getReimbursementServiceFee()
                    }
                    this.isFbxdzt = res.result.bxd.fbxdzt=='完成' || row.view?true:false
                    this.fromState = {
                        ...row,
                        ...res.result.bxd,
                        heightType:row.heightType,
                        id:undefined,
                        fbxdid:res.result.bxd && res.result.bxd.id?res.result.bxd.id:''
                    }
                    this.isSpecial = this.fromState.fsfytssxsq?this.fromState.fsfytssxsq:''
                    if(res.result.bxd && res.result.bxd.id){

                        this.dataTableConfig.paramet = {fbxdid:res.result.bxd.id}
                        this.specialDataTableConfig.paramet = {fbxdid:res.result.bxd.id}
                        this.dataTableKey = Date.now()
                        this.specialDataTableKey = Date.now()
                        //console.log('报销单所有信息',ztVal,val,this.dataTableConfig)
                        this.getPersonnelData(res.result.bxd.id,true,ztVal?ztVal:val)
                        this.getAllSpecial()
                        this.getExpertServices()
                        this.getBxmx()
                    }
                }
            })
            this.reimbursementContentKey = Date.now()
        },
        getEditData(val1,val2){
            if(val2){
                this.initiateOrNot = val2.isInit
            }
            //console.log('initiateOrNot',this.initiateOrNot)
            let data = {
                fbxdzt: '汇总表单',
                id:val1.bxdid,
            }
            jcyfybxdupdateBxd(data).then(res => {
                if(res.code == 200){
                    this.getData(val1)
                }
            })
        },
        // 新手指引
        getGuide(){
            const storedData = localStorage.getItem('jcybxGuideType');
            if (storedData) {
                // 将 JSON 字符串转换回对象
                let data = JSON.parse(storedData);
                if(data.key == '0'){
                    this.isNeedGuide = true
                } else {
                    this.isNeedGuide = false
                }
            }
        },
        getguideCzBxdZt(){
            this.guideFuntion(true)
        },
        upDataGuide(){
            if(!this.isNeedGuide){
                return
            }
            guideTgBxdZt().then(async resa => {
                //console.log('更新数据',resa.success,resa)
                if(resa.success){
                    //console.log('进来了吧？？？')
                    let res = await guideCzzyBxdZt()
                    //console.log('没成功进来吗？？？',res.success,res)
                    if(res.success){
                        const dataObject = { key: res.result };
                        // 转换对象为JSON字符串
                        const dataString = JSON.stringify(dataObject);
                        if (localStorage.getItem('jcybxGuideType')) {
                            //console.log('新手指引---有')
                            // 获取原数据，修改它，并重新存储
                            const originalData = JSON.parse(localStorage.getItem('jcybxGuideType'));
                            // 据覆盖原数据
                            localStorage.setItem('jcybxGuideType', dataString);
                        }
                        // 为了确保数据已正确存储，读取并打印它
                        const storedData = JSON.parse(localStorage.getItem('jcybxGuideType'));
                        //console.log(storedData);
                        this.getGuide()
                    }
                }
            })
        },
        guideFuntion(isOnce){
            if(!this.isNeedGuide && !isOnce){
                return
            }
            this.$nextTick(() => {
                // DOM更新完成后执行的代码
                const myElement = document.querySelector('.reimbursement-content-box-v');
                const myElement1 = document.querySelector('.special-item-btn-v');
                if(this.currentSteps == 1 && !myElement1){
                    return
                }
                if (myElement) {
                    //console.log('MMMMMMMMMMMMMMMMMMM',myElement);
                    let stepList = this.stepsList[this.currentSteps].steps
                    // 对myElement进行操作
                    var intro = introJs('.reimbursement-content-box-v');
                    intro.setOptions({
                        steps: stepList,
                        exitOnOverlayClick: false, // 点击遮罩层时不退出介绍
                        exitOnEsc: false, // 按Esc键时不退出介绍
                        nextLabel: '下一步', // 自定义“下一步”按钮文本
                        prevLabel: '上一步', // 自定义“上一步”按钮文本
                        skipLabel: '跳过引导', // 自定义“跳过”按钮文本
                        doneLabel: '结束' // 自定义“结束”按钮文本
                        // 其他配置根据需要设置
                    }).start()

                const self = this;
                intro.onbeforechange (function(callback) {
                    // 当用户导航到教程中的下一个步骤之前触发
                    //console.log('当用户导航到教程中的下一个步骤之前触发', callback);
                });
                intro.onafterchange (function(targetElement, elementPosition) {
                    // 当用户导航到教程中的下一个步骤后触发
                    //console.log('当用户导航到教程中的下一个步骤后触发', targetElement, elementPosition);
                });
                intro.onchange (function(targetElement, elementPosition) {
                    // 每当用户导航到教程中的新步骤时触发，无论它是前进还是后退
                    //console.log('每当用户导航到教程中的新步骤时触发，无论它是前进还是后退',targetElement, elementPosition);
                });
                intro.onexit  (function(targetElement) {
                    // 当用户关闭或完成教程时触发
                    //console.log('当用户关闭或完成教程时触发',targetElement);
                });
                intro.onskip  (function(targetElement) {
                    // 当用户跳过教程时触发
                    //console.log('当用户跳过教程时触发',targetElement,self.currentSteps);
                    self.upDataGuide()
                });
                // intro.onbeforestart  (function(targetElement) {
                //     // 在教程开始之后触发
                //     //console.log('在教程开始之后触发',targetElement);
                // });
                intro.oncomplete  (function(targetElement) {
                    // 当用户完成教程时触发
                    //console.log('当用户完成教程时触发',targetElement);
                    if(self.currentSteps == 5){
                        self.upDataGuide()
                    }
                });
            }
            });
        },
        specialChange(e){
            //console.log(e.target.value)
            if(e.target.value == '是'){
                this.guideFuntion(false)
            }
        },
        getBxmx(){
            spcyjcyfybxdGetbxmx({fbxdid: this.fromState.fbxdid}).then(res => {
                if(res.success){
                    this.bxmxList = res.result?res.result:[]
                }
            })
        },
        currentStepChange(val){
            if(val == 2){
                this.getReimbursementServiceFee()
            }
            //console.log(val)
            // if(!this.isFbxdzt){
            //     this.currentSteps = val
            // }
        },
        getReimbursementServiceFee(){
            this.$nextTick(()=>{
                setTimeout(()=>{
                    this.reimbursementServiceFeeHeight = document.getElementById(this.reimbursementServiceFeeId).offsetWidth
                },200)
            })
        },
        getAllSpecial(){
            jcyfybxdqueryFybxdTssxSqPageList({fbxdid:this.fromState.fbxdid}).then(res=>{
                if(res.code == 200){
                    this.allSpecialList = res.result.records
                }else{
                    this.allSpecialList = []
                }
            })
        },
        async getPersonnelData(id,val,ztVal){
            await jcyfybxdqueryBxryxxListByBxdId({fbxdid:id}).then(res=>{//根据报销单id查询人员列表
                if(res.code == 200){
                    this.personnelList = res.result.records
                    if(val && this.currentSteps == 4){
                        this.f1(res.result.records,this.fromState.fbxdid)
                    }
                    //console.log('人员列表---',this.personnelList)
                }else{

                }
            })
            jcyfybxdNkBxJtxcdList({fbxdid:id}).then(res=>{//根据报销单id查询人员列表-交通费
                if(res.code == 200){
                    this.transportationList = []
                    this.transportationList1 = []
                    // this.personnelList = res.result.records
                    // res.result.records.forEach((item,index)=>{
                    //     if(val){
                    //         jcyfybxdqueryFybxdDfryList({id:item.id,fbxdid:this.fromState.fbxdid}).then(res1=>{
                    //             if(res1.code == 200){
                    //                 this.advancePaymentList.push(res1.result)
                    //                 this.advancePaymentList.push(res1.result)
                    //                 this.personnelAdvanceList.push(res1.result)
                    //             }else{
                    //                 this.advancePaymentList.push([])
                    //                 this.personnelAdvanceList.push([])
                    //             }
                    //         })
                    //     }
                    //     this.transportationList.push({...item,bgColor:(index+1) % 2 == 0?true:false})
                        // this.transportationList.push({...item,bgColor:(index+1) % 2 == 0?true:false})

                    // })

                    const sortedItems = res.result.slice().sort((a, b) => {
                        if (a.realname < b.realname) {
                            return -1;
                        }
                        if (a.realname > b.realname) {
                            return 1;
                        }
                        // 如果名字相同，则不改变它们的相对顺序
                        return 0;
                    })
                    sortedItems.forEach((item,index)=>{
                        this.transportationList.push({...item,bgColor:(index+1) % 2 == 0?true:false,list:[]})
                        this.transportationList1.push({...item,bgColor:(index+1) % 2 == 0?true:false,list:[]})

                    })
                    if(val && this.currentSteps == 3){
                        this.f1(this.transportationList1,this.fromState.fbxdid)
                    }
                    let num = ''
                    let arr1 = []
                    let arr2 = {}
                    this.transportationList.forEach((item,index) => {
                        if(arr1.indexOf(item.realname) == -1){
                            arr2 = {}
                            arr1.push(item.realname)
                            num = index

                            arr2 = this.personnelList.filter(items => items.realname == item.realname)
                            //console.log('匹配成功的===========',arr2)
                            let data = {
                                flwfts: arr2[0].flwfts,
                                flwfsbje: arr2[0].flwfsbje,
                                fhsbzts: arr2[0].fhsbzts,
                                fhsbzsbje: arr2[0].fhsbzsbje,
                                fsnjtbzts: arr2[0].fsnjtbzts,
                                fsnjtbzje: arr2[0].fsnjtbzje,
                                fzxfts: arr2[0].fzxfts,
                                fzxfsbje: arr2[0].fzxfsbje,
                                fclfsbhjje: arr2[0].fclfsbhjje,
                                fzxfsfdf: arr2[0].fzxfsfdf,
                                fzxfdfrxm: arr2[0].fzxfdfrxm,
                                flwfsfjgs: arr2[0].flwfsfjgs,
                                flwfgsje: arr2[0].flwfgsje,
                                fyhkh: arr2[0].fyhkh,
                                fkfh: arr2[0].fkfh,
                                fkhhszd: arr2[0].fkhhszd,
                            }
                            this.transportationList1[num] = {...item,...data}
                            this.transportationList1[num].list.push(item)
                        } else {
                            //console.log('放进去的',item)
                            let arr3 = this.personnelList.filter(items => items.realname == item.realname)
                            //console.log('匹配成功的----------',arr3[0].fclfsbhjje)
                            this.transportationList1[index] = {
                                ...item,
                                fclfsbhjje: arr3[0].fclfsbhjje,
                                fzxfsfdf: arr3[0].fzxfsfdf,
                                fzxfdfrxm: arr3[0].fzxfdfrxm,
                            }
                            this.transportationList1[num].list.push(item)
                        }
                    })
                    this.tableKey = Date.now()
                    //console.log('交通费人员列表---',ztVal,this.transportationList1)
                    if(ztVal){
                        this.guideFuntion(false)
                    }
                }else{

                }
            })
        },
        async f1(item,ids){
            this.advancePaymentList = []
            this.personnelAdvanceList = []
            var dd=[]
            var advance = []
            ! await function f2(){
                    return new Promise(resolve=>{
                        var x=0;
                        dfs(x)
                        function dfs(x){ //递归
                            jcyfybxdqueryFybxdDfryList({id:item[x].fuserid,fbxdid:ids}).then((res)=>{
                                // let res1=JSON.stringify(res.result)//对象转为json
                                //console.log('递归---',item[x])
                                let res1= res.result
                                dd.push(res1)
                                // advance.push(res1)
                                advance.push(res1)
                                //console.log("ddli:"+x)
                                x++;
                                if(x<item.length && dd.length == x && advance.length == x){
                                    //console.log('进入新方法：',x)
                                    dfs(x)
                                }else{
                                    resolve()//递归完成，返回Promise.resolve
                                }
                            })
                        }
                    })
            }()
            await console.log("ddwai:"+dd)
            this.advancePaymentList = advance // 交通费
            this.personnelAdvanceList = dd // 住宿费
            //console.log('我获取-交通费-垫付人',this.advancePaymentList)
            //console.log('我获取-住宿费-垫付人',this.personnelAdvanceList)
        },
        nkBxJtxcdAdd(item){
            let data = {
                fbxdid: this.fromState.fbxdid,
                fuserid: item.fuserid,
                fbxdgrid: item.fbxdgrid,
            }
            jcyfybxdNkBxJtxcdAdd(data).then(res => {
                if(res.success){
                    this.$message.success(res.message)
                    this.getPersonnelData(this.fromState.fbxdid,true)
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        nkBxJtxcdDelete(item){
            var that = this
            that.$confirm({
                title: '您确认要删除当前交通记录吗?',
                onOk() {
                    let data = {
                        fbxdid: that.fromState.fbxdid,
                        fuserid: item.fuserid,
                        fbxdgrid: item.fbxdgrid,
                        id: item.id,
                    }
                    jcyfybxdNkBxJtxcdDelete(data).then(res=>{
                        if(res.code == 200){
                            that.$message.success(res.message)
                            that.getPersonnelData(that.fromState.fbxdid,true)
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                },
                onCancel() {
                    //console.log('Cancel');
                },
            });
        },
        getExpertServices(){
            jcyfybxdqueryZjlwfList({fbxdid:this.fromState.fbxdid}).then(res=>{
                if(res.code == 200){
                    this.expertServicesList = res.result.records
                    var sum = 0
                    res.result.records.forEach((item,index)=>{
                        let num = Number(item.flwfsqje)
                        sum += num
                    })
                    this.expertServicesTotal = parseFloat(sum.toFixed(2))
                }else{
                    this.expertServicesList = []
                }
            })
        },
        //0
        selectedRowKeysChange(){

        },
        searchEvent(){

        },
        resetEvent(){

        },
        dataTableChange(){
            this.dataTableKey = Date.now()
        },
        addPersonnelClick(){
            this.$refs.addPersonnelRef.getData({sqsxid:this.fromState.sqsxid,fbxdid:this.fromState.fbxdid,})
            this.$refs.addPersonnelRef.visible = true
        },
        selectPersonnelClick(){
            this.$refs.selectPersonnelRef.getData({sqsxid:this.fromState.sqsxid,fbxdid:this.fromState.fbxdid,})
            this.$refs.selectPersonnelRef.visible = true
        },
        upDataClick(row){
            //console.log(row)
            spcyjcyfybxdTybxjlxx({id:row.id}).then(res => {
                if(res.code == 200){
                    this.$message.success(res.message)
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        editClick(row){
            //console.log(row)
            this.$refs.addPersonnelRef.getData({sqsxid:this.fromState.sqsxid,fbxdid:this.fromState.fbxdid,...row})
            this.$refs.addPersonnelRef.visible = true
        },
        deleteClick(row){
            //console.log(row)
            let that = this
            this.$confirm({
                title:'您确认删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    jcyfybxddeleteBxrymxById({id:row.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success(res.message)
                            that.dataTableChange()
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                }
            })

        },

        //1
        fjctsChange(val){
            jcyfybxdbatchSzLwHsJtbzTs({fbxdid:this.fromState.fbxdid,fjcts:val.target.value}).then(res=>{
                if(res.code == 200){
                    this.getPersonnelData(this.fromState.fbxdid)
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        specialSelectedRowKeysChange(){

        },
        specialSearchEvent(){

        },
        specialResetEvent(){

        },
        specialAddClick(){
            this.$refs.additionalReimbursementRef.getData({
                sqsxid:this.fromState.sqsxid,
                fbxdid:this.fromState.fbxdid,
                fjbks:this.fromState.fjbks,
                fjbr:this.fromState.fjbr,
                fbxnrms:this.fromState.fbxnrms,
                fbxsjms:this.fromState.fbxsjms,
            },{})
            this.$refs.additionalReimbursementRef.visible = true
        },
        specialPrintClick(){

        },
        specialEditClick(row){
            //console.log(row)
            this.$refs.additionalReimbursementRef.getData({
                sqsxid:this.fromState.sqsxid,
                fbxdid:this.fromState.fbxdid,
                fsqlx:row.fsqlx,
                fjbks:this.fromState.fjbks,
                fjbr:this.fromState.fjbr,
                fxmnr:this.fromState.fbxnrms,
                fxmsj:this.fromState.fbxsjms,
                isEide:true,
                isView: false,
            },row)
            this.$refs.additionalReimbursementRef.visible = true
        },
        specialViewClick(row){
            //console.log(row)
            this.$refs.additionalReimbursementRef.getData({
                sqsxid:this.fromState.sqsxid,
                fbxdid:this.fromState.fbxdid,
                fsqlx:row.fsqlx,
                fjbks:this.fromState.fjbks,
                fjbr:this.fromState.fjbr,
                fxmnr:this.fromState.fbxnrms,
                fxmsj:this.fromState.fbxsjms,
                // isEide:true,
                isView: true,
            },row)
            this.$refs.additionalReimbursementRef.visible = true
        },
        specialWithdrawClick(row){
            //console.log(row)
            var that = this
            that.$confirm({
                title: '当前申请已提交但未开始审核，您确定要撤回吗?',
                onOk() {
                    tssqsqchjk({chztid:row.chzt}).then(res => {
                        if(res.code == 200){
                            that.$message.success(res.message)
                            that.successSpecialData()
                        }else{
                            that.$message.warning(res.message)
                        }
                        // let list = res.result.jobHistoryList
                        // let slist = list.filter(item => item.fhjmc == '申请')
                        // const sortedDates = slist.sort((a, b) => new Date(b) - new Date(a));
                        // that.returnFuntion(row.chzt,sortedDates[slist.length - 1].id)
                    })
                },
                onCancel() {},
            })
        },
        returnFuntion(jobid,ids){
            let data = {
                jobid: jobid,
                opinion: '退回',
                shjid: ids,
                lcmbbm: '',
                smgflag: '',
                smsContent: '',
            }
            tssqsqreturnUpperzdyFlowJob(data).then(res => {
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.newSpecialData()
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        isSpecialDeleteClick(row){
            tssqsqPdsfnsc({id:row.id}).then(res => {
                if(res.result){
                    let that = this
                    that.$confirm({
                        title:'当前记录可删除，您确认要删除吗？',
                        onOk() {
                            tssqsqSctssx({id:row.id}).then(res=>{
                                if(res.code == 200){
                                    that.$message.success(res.message)
                                    that.successSpecialData()
                                }else{
                                    that.$message.warning(res.message)
                                }
                            })
                        }
                    })
                } else {
                    this.$message.info('当前记录不可删除')
                }
            })
        },
        specialDeleteClick(row){
            let that = this
            that.$confirm({
                title:'您确认要删除当前申请数据吗？',
                onOk() {
                    tssqsqSctssx({id:row.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success(res.message)
                            that.successSpecialData()
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                }
            })
        },
        successSpecialData(){
            this.getData(this.fromState)
            this.specialDataTableKey = Date.now()
        },
        newSpecialData(){
            this.specialDataTableKey = Date.now()
        },
        uploadFilesListOther(val){
            this.$refs.uploadFilesOtherRef.getData({id: this.fromState.fbxdid},val)
        },
        //添加特殊报销项
        addSpecialReimburse(val){
            //console.log(val)
            this.$refs.additionalReimbursementRef.getData({
                fsqlx:val,
                sqsxid:this.fromState.sqsxid,
                fbxdid:this.fromState.fbxdid,
                fjbks:this.fromState.fjbks,
                fjbr:this.fromState.fjbr,
                fxmnr:this.fromState.fbxnrms,
                fxmsj:this.fromState.fbxsjms,
            },{})
            this.$refs.additionalReimbursementRef.visible = true
        },
        // 添加特殊事项后更新fsfytssxsq
        updataFsfytssxsq(){
            let data = {
                ...this.fromState,
                id:this.fromState.fbxdid,
                fsfytssxsq: '是',
            }
            jcyfybxdupdateBxd(data).then(res => {
                if(res.success){
                    this.successSpecialData()
                }
            })
        },
        //劳务费
        displayDays(item,index,val){
            this.editTsItem = 'ts'+index+val
            let refData = 'ts'+index+val+'ref'
            let that = this
            setTimeout(() => {
                this.$nextTick(() => {
                    document.getElementById('ts'+index+val+'class').focus()
                })
            }, 200)
        },
        serviceFeeBlur(item){
            jcyfybxdupdateBxrymxxx({...item,sqsxid:this.fromState.sqsxid,fbxdid:this.fromState.fbxdid}).then(res=>{
                if(res.code == 200){
                    this.editTsItem = ''
                    this.$message.success(res.message)
                    this.getPersonnelData(this.fromState.fbxdid)
                }else{
                    this.$message.warning(res.message)
                }
            })

        },
        //交通费用
        cxfsHandleChange(val){
            //console.log(val)
            this.cxfsSyArr = val
        },
        cxfsBlur(val,item){
            //console.log(val,item)
            if(item){
                this.nkBxJtxcdEdit(item,'出行方式')
            }else{
                //console.log('我才触发')
                jcyfybxdbatchSetBxdCxfs({fbxdid:this.fromState.fbxdid,fcsjjtfs:val}).then(res=>{
                    if(res.code == 200){
                        this.cxfsKey = Date.now()
                        this.$message.success(res.message)
                        this.getPersonnelData(this.fromState.fbxdid)
                        this.getData(this.fromState)
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }
        },
        transportationBlur(item,val){
            jcyfybxdupdateBxrymxxx({fbxdid:this.fromState.fbxdid,...item}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.getPersonnelData(this.fromState.fbxdid)
                    if(val == '出行方式'){
                        this.getData(this.fromState)
                    }
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        addTransfer(item){
            this.$refs.addApplicationForTransferFormRef.visible = true
            this.$refs.addApplicationForTransferFormRef.getData(
                {
                    fjtxcdid:item.id,
                    fbxdid: item.fbxdid,
                    fsqsxid: item.fsqsxid,
                    fsqrid: item.fuserid,
                    fsqrxm: item.realname,
                },
                item.fbxdgrid
            )
        },
        transportationActiveChange(val){
            //console.log(val)
            if(val == '交通费填写'){
                this.getPersonnelData(this.fromState.fbxdid)
                // this.getData(this.fromState)
            }
            if(val == '机票信息'){
                this.transportationTableConfig.paramet.fbxdid = this.fromState.fbxdid
                this.transportationTableKey = Date.now()
            }
        },
        transportationEditClick(row){
            this.$refs.addApplicationForTransferFormRef.visible = true
            this.$refs.addApplicationForTransferFormRef.upGetData({
                id: row.id,
                fwfqk: row.fwfqk,
                fskdw: row.fskdw,
                fkhyh: row.fkhyh,
                fzh: row.fzh,
                fjexx: row.fjexx,
            })
        },
        transportationDeleteClick(row){
            let that = this
            this.$confirm({
                title:'您确认删除当条转账单吗？',
                onOk() {
                    zzrybxdDeletzzsq({id:row.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success(res.message)
                            that.transportationTableKey = Date.now()
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                }
            })
        },
        updatezzsquSuccess(){
            this.transportationTableKey = Date.now()
        },
        time1Change(val,type,ids){
            if(type == '去'){
                this.nkBxJtxcdEdit({fcsjjtwqsrq:val[0]? moment(val[0]).format('YYYY-MM-DD'):'',id:ids})
                this.nkBxJtxcdEdit({fcsjjtwddrq:val[1]? moment(val[1]).format('YYYY-MM-DD'):'',id:ids})
            } else {
                this.nkBxJtxcdEdit({fcsjjtfqsrq:val[0]? moment(val[0]).format('YYYY-MM-DD'):'',id:ids})
                this.nkBxJtxcdEdit({fcsjjtfddrq:val[1]? moment(val[1]).format('YYYY-MM-DD'):'',id:ids})
            }
        },
        nkBxJtxcdEdit(item,val){
            //console.log(item,val)
            jcyfybxdNkBxJtxcdEdit({fbxdid:this.fromState.fbxdid,...item}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.getPersonnelData(this.fromState.fbxdid)
                    if(val == '出行方式'){
                        this.getData(this.fromState)
                    }
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        //汇总
        summaryActiveChange(val){
            //console.log(val)
        },
        saveSpecial(item){//保存特殊事项
            let data = {
                fbxdid:this.fromState.fbxdid,
                ...item,
            }
            jcyfybxdupdateFybxdTssxSq(data).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.getAllSpecial()
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        overdueReimbursementClick(item){
            this.$refs.selectApplicantRef.getData({item,idArr:item.fewfybxsqrid?item.fewfybxsqrid.split(','):[],val:1,fbxdid:this.fromState.fbxdid})
            this.$refs.selectApplicantRef.visible = true
        },
        noonBreakClick(item){
            this.$refs.selectApplicantRef.getData({item,idArr:item.fwxfsqrid?item.fwxfsqrid.split(','):[],val:2,fbxdid:this.fromState.fbxdid})
            this.$refs.selectApplicantRef.visible = true

        },
        getApplicantData(row){
            //console.log(row)
            var data = {}
            if(row.val == 1){
                data = {
                    id:row.id,
                    fewfybxsqrid:row.id,
                    fewfybxsqrxm:row.name,
                }
            }else{
                data = {
                    id:row.id,
                    fwxfsqrid:row.id,
                    fwxfsqrxm:row.name,
                }
            }
            this.saveSpecial(data)
        },
        //底部按钮
        saveClick(val,ztVal,fqVal){//保存
            //console.log(val,ztVal)
            let data = {
                ...this.fromState,
                id:this.fromState.fbxdid,
            }
            //console.log(this.currentSteps)
            if(this.currentSteps == 5 && ztVal == '下一步'){
                this.messaageSaveClick(data)
                return
            }
            if(this.currentSteps == 1 && ztVal !== '上一步'){
                data.fsfytssxsq = this.isSpecial
            }
            jcyfybxdupdateBxd(data).then(res=>{
                if(res.code == 200){
                    if(val){
                        this.$message.success(res.message)
                    }
                    if(ztVal == '下一步'){
                        this.nextStepClick(fqVal,ztVal)
                    }else if(ztVal == '上一步'){
                        this.backStepClick(ztVal)
                    }else{
                        this.getData(this.fromState)
                    }
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        // 完成前提示
        messaageSaveClick(data){
            var that = this
            that.$confirm({
                title: '点击完成按钮后，所形成的表单数据将不可更改，您确认要继续提交吗?',
                onOk() {
                    jcyfybxdupdateBxd(data).then(res=>{
                        if(res.code == 200){
                            that.$message.success(res.message)
                            that.nextStepClick(true)
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                },
                onCancel() {
                    //console.log('Cancel');
                },
            });
        },
        backStepClick(ztVal){//上一步
            jcyfybxdreturnFybxd({fbxdid:this.fromState.fbxdid}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.getData(this.fromState,ztVal)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        nextStepClick(val,ztVal){//下一步
            jcyfybxdsubmitFybxd({fbxdid:this.fromState.fbxdid}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.getData(this.fromState,ztVal)
                    if(val && this.initiateOrNot){
                        this.InitiateProcess()
                    }
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        InitiateProcess(){
            // initBzFlow({fsffqlc:'是',id:this.fromState.fbxdid}).then(res => {})
            initBzFlow({...this.fromState,fbxdzt:'完成',fsffqlc:'是',id:this.fromState.fbxdid}).then(res => {})
        },
        totalPrintClick(){//打包打印
            this.$refs.totalPrintRef.getData(this.fromState,this.transportationList1,this.allSpecialList,this.expertServicesList,this.expertServicesTotal)
            this.$refs.totalPrintRef.visible = true
        },
    }
}
</script>
<style lang="less">
.reimbursement-content-box-v{
    .ant-steps-item-content {
        width: 135px;
    }
    .ant-steps-item-title{
        font-weight: 600 !important;
        font-size: 16px;
    }
    .reimbursement-infoArea-box{
        .special-content-radio{
            height: calc(100vh - 225px);
            display: flex;
            align-items: center;
            // justify-content: center;
            flex-direction: column;
            margin-top: 30px;
            .ant-radio-wrapper{
                font-size: 18px;
            }
            .ant-radio-inner{
                width: 20px;
                height: 20px;
            }
            .ant-radio-inner::after{
                width: 12px;
                height: 12px;
            }
            .special-item-btn-v{
                margin-left: 365px;
                margin-top: 15px;
                text-align: center;
            }
        }
        .fjcts-content-box{
            text-align: center;
            margin: 10px 0;
            display: flex;
            justify-content: center;
            .fjcts-content-v{
                width: 80%;
                padding:10px 0;
                border: 1px solid #d9d9d9;
            }
            .fjcts-content-text{
                display: inline-block;
                width: 320px;
                text-align: right;
                font-size: 16px;
                font-weight: 600;
            }
            .fjcts-content-right{
                display: inline-block;
                width: 230px;
                text-align: left;
            }
        }

    }
    .reimbursement-serviceFee-table{
        th{
            text-align: center;
            font-size: 16px;
            padding: 3px 5px;
        }
        td{
            text-align: center;
            padding: 3px 5px;
            height: 40px;
            font-size: 16px;
        }
        .serviceFee-icon-text-td{
            width: 120px;
        }
        .serviceFee-icon-text{
            display: flex;
            align-items: center;
            padding: 0 5px;
            .serviceFee-icon{
                color: #5ca3e5;
            }
            span{
                text-align: center;
                flex: 1;
            }
        }

    }
    .reimbursement-transportation-table{
        th{
            text-align: center;
            font-size: 16px;
            padding: 3px 5px;
        }
        td{
            text-align: center;
            padding: 3px 5px;
            height: 40px;
            font-size: 16px;
        }
        .special-table-lable-td{
            background-color: #e6f7ff;
        }
    }
    .reimbursement-summary-table-5{
        .tabs-card-edit-box{
            margin: 5px 15px 0 15px;
            .ant-tabs-bar{
                // border: 0 !important;
                border-color: #38f !important;
                margin: 0 !important;
            }
            .ant-tabs-tab{
                background: #edeff3 !important;
                font-size: 14px !important;
                margin-left: 1px !important;
                height: 30px !important;
                line-height: 30px !important;

            }
            .ant-tabs-tab-active{
                margin: 0 !important;
                margin-left: 0 !important;
                margin-right: 1px !important;
                background-color: #38f !important;
                color: #fff !important;
                height: 32px !important;
                border: 1px solid #38f !important;
                border-bottom: 0 !important;
                padding:0 15px !important;

            }
            .ant-tabs-nav-container{
                height: 32px !important;
            }
        }
        .tab-box-v1{
            border: 1px solid #38f;
            border-top: 0;
            margin: 0 15px;
            // height: calc((100vh - 260px) / 2 );
        }

        .tabs-card-edit-box2{
            .ant-tabs-tab{
                // margin-right: 5px !important;
                border-bottom-left-radius: 10px !important;
                border-bottom-right-radius: 10px !important;
            }
        }
        .tabs-card-edit-box3{
            .ant-tabs-tab-active{
                background-color: #fff !important;
                color: #38f !important;
            }
        }
        .tabs-card-edit-box4{
            .ant-tabs-tab{
                // margin-right: 5px !important;
                border-top-left-radius: 10px !important;
                border-top-right-radius: 10px !important;
            }
            .ant-tabs-tab-active{
                background-color: #fff !important;
                color: #38f !important;
            }
        }
    }

    //汇总表
    .reimbursement-summary-1{
        width: 100%;
        padding: 10px 15px;
        .table-hear{
            display: flex;
            font-weight: 600;
            flex-direction: column;
            h3{
                font-weight: 600;
                font-size: 22px;
                text-align: center;
            }
            span{
                display: inline-block;
                width: calc(100% - 8px);
                text-align: right;
                padding-right: 8px;
            }
        }
        .serviceFee-icon-text-td{
            width: 70px !important;
        }
        .serviceFee-icon-text{
            display: flex;
            align-items: center;
            padding: 0 5px;
            .serviceFee-icon{
                color: #5ca3e5;
            }
            span{
                text-align: center;
                flex: 1;
            }
        }
    }
    .introjs-tooltip {
        // left: 35% !important;
        min-width: 500px;
        max-width: 700px;
        .introjs-tooltiptext {
            font-size: 18px;
        }
        .introjs-skipbutton {
            font-size: 18px;
            width: 120px;
        }
    }
}
</style>
